Jquery dialog -- pop-up box 1

When creating a system, you often need to pop up a page so that you can select some options or make the page too small. But we don't want to use the pop-up box that comes with the browser, so we need to do it ourselves. Next we will make a simple pop-up box, that is, there is a shadow layer, and then a center display layer, and finally add an IFRAME in the center layer, A pop-up layer is ready.

Example

 

 

CSSCode

 

View code

 HTML, body {height:  100 % ; Padding:  0  ; Margin:  0  ;}. Dfilter {position: absolute; width:  100 % ; Height:  100 % ; Z -Index: 999  ; Background - Color: Gray; left: 0px; top: 0px;}. dbody {position: absolute; Z -Index: 1000  ; Border: 2px solid # c4d9f6; Background - Color: White;}. dheader {background -Image: URL (../img/ Bg_bar02.jpg); Height: 20px; width:  100 % ; Line - Height: 20px;}. dheader label {color: black;  Float : Left; font - Weight: bold; margin - Left: 5px; line - Height: 20px;}. dheader IMG {  Float  : Right; Height: 18px; width: 18px; Background -Image: URL (../img/ Close.png );} 

JS Code

View code

 /*  Create by: Mike. Jiang create Date: 2012-07-03  */  VaR Dialog ={Removedialog:  Function  () {$ ( "# Dfilter" ). Remove (); $ ( "# Dbody" ). Remove (); dialog. showselect () ;}}$ (  Function  () {$. FN. Extend ({showdialog:  Function  (Options ){  //  Internal functions of the plug-in              VaR Nfun = {Hideselect: Function  () {$ ( "Select" ). Hide () ;}, showselect:  Function  () {$ ( "Select" ). Show () ;}, removedialog:  Function  () {$ ( "# Dfilter" ). Remove (); $ ( "# Dbody" ). Remove (); nfun. showselect () ;}, centershow: Function  (Dbody, width, height ){  VaR Toppx = 0 ; Toppx = Parameters (document.doc umentelement). Height ()- Height;  If (Toppx <0 ) {Toppx = 0 ;}  Else  {Toppx = Certificate (document.doc umentelement). scrolltop () + toppx/2 ;} VaR Leftx = sums (document.doc umentelement). Width ()- Width;  If (Leftx <0 ) {Leftx = 0 ;}  Else  {Leftx = Certificate (document.doc umentelement). scrollleft () + leftx/2 ;} Dbody.css ({ "Left": leftx + "PX", "TOP": toppx + "PX" });}}  VaR Settings ={Height: 400, //  Height of the pop-up box Width: 400, //  Width of the pop-up box Title: "title ", //  Title of the pop-up box SRC :"", //  Page URL in the pop-up box Beforeshow: nfun. hideselect, //  Method Before the pop-up box is displayed Afterclose: nfun. showselect // Method After the pop-up box is closed  };  If  (Options) {$. Extend (settings, options);} nfun. removedialog (); settings. beforeshow ();  //  Back Cover (whether it is a mode window)              VaR Dfilter = $ ('<Div id = "dfilter" class = "dfilter"> </div>' ). Appendto (document. Body); dfilter.css ( "Opacity", "0.5" ); Dfilter.css ( "Height" , $ (Document). Height (); dfilter.css ( "Width", $ (Document). Width ());  //  The primary Div of the pop-up page              VaR Dbody = $ ('<Div id = "dbody" class = "dbody"> </div>' ). Appendto (document. Body );  VaR Dbodyheight = settings. height + 20 ; Dbody.css ({ "Width": settings. Width + "PX", "height": dbodyheight + "PX" });  //  The header of the pop-up page              VaR Dheader = $ ('<Div class = "dheader"> </div>'). Appendto (dbody );  //  The title of the pop-up page              VaR Dtitle = $ ('<label> </label>' ). Appendto (dheader); dtitle. Text (settings. Title );  //  Close the page              VaR Dclose = $ ('' ). Appendto (dheader );  //  Pop-up page content container IFRAME              VaR Diframe = $ ('<IFRAME frameborder = "0"> </iframe>'). Appendto (dbody );  //  Set the width and height of the pop-up box              VaR Diframewidth = Settings. width; diframe. ATTR ({ "Width": diframewidth + "PX", "height": settings. height + "PX", "src" : Settings. SRC });  //  Set the dialog box to center  Nfun. centershow (dbody, settings. Width, settings. Height );  //  Close button event Dclose. Click (Function  () {Nfun. removedialog (); settings. afterclose () ;}); $ (window). Resize (  Function  () {Nfun. centershow (dbody, settings. Width, settings. Height );});}});}); 

 

HTML code

View code

     <  Script  Type  = "Text/JavaScript"  >  $ (Document). Ready ( Function  () {$ (  "  # Btnpopup  "  ). Click (  Function  () {$ (Window). showdialog ({width:  800  , Height:  400 , Title:  "  Blog  "  , Src:  "  Http://www.cnblogs.com  "  });});});  </  Script  >