A sample of the simulated pop-up windows feature implemented in jquery _jquery

The example in this article describes the simulation popup function implemented by jquery. Share to everyone for your reference, specific as follows:

Initialize documents $ (document). Ready ();  ----------------the pop-up div imitation modal window starts----------------var divw;  Div width var divh;  div height var clienth;  Browser height var clientw;  Browser width var divtitle;  Div title Var pageurl;  div loaded page var div_x;  div horizontal axis var div_y;  Div ordinate function Divwindowopen (divwidth,divheight,title,url) {divw = Divwidth;  div width DIVH = divheight;  div height divtitle = title;  div height pageurl = URL;  div loaded page ur lockscreen ();
  Lock background divopen ();
  $ ("#divTitle"). Append (Divtitle);
  $ ("#divContent"). Load (pageurl);
    Swap x Picture $ ("#x"). Hover (function () {$ (this). attr ("src", "images/close-2.gif");
    , function () {$ (this). attr ("src", "images/close-1.gif");
  }
  );
      Close div window $ ("#x"). Click (function () {Cleardivwindow ();
    Clearlockscreen ();
}
  );  //Returns the coordinate function of the pop-up div Divopen () {var mintop = 80;  The minimum distance if ($ ("#divWindow") that pops up the top of the div record. length = = 0) {clienth = $ (window). Height ();  Browser Height CLIENTW = $ (window). width ();
 Browser width   div_x = (CLIENTW-DIVW)/2;  div horizontal div_y = (CLIENTH-DIVH)/2;  div ordinate div_x + = Window.document.documentElement.scrollLeft;  Div shows the actual horizontal axis div_y + = Window.document.documentElement.scrollTop;
    The actual ordinate of the div display if (div_y < mintop) {div_y = Mintop; } $ ("Body"). Append ("<div id= ' Divwindow ' ><div id= ' divtitle '" >  </div><div id= ' divcontent ' > Loading </div></div> ');
    Increase the style of the Div//divwindow $ ("#divWindow"). CSS ("position", "absolute");
    $ ("#divWindow"). CSS ("Z-index", "200");  $ ("#divWindow"). CSS ("Left", (div_x + "px"));  Position the horizontal axis of the div $ ("#divWindow"). CSS ("Top", (div_y + "px"));
    Position the ordinate of the div $ ("#divWindow"). CSS ("opacity", "0.9");
    $ ("#divWindow"). Width (DIVW);
    $ ("#divWindow"). Height (DIVH);
    $ ("#divWindow"). CSS ("Background-color", "#FFFFFF");
    $ ("#divWindow"). CSS ("border", "solid 1px #333333");
    Divtitle's Style $ ("#divTitle"). CSS ("height", "20px"); $ ("#divTitLe "). CSS (" Line-height "," 20px ");
    $ ("#divTitle"). CSS ("Background-color", "#333333");
    $ ("#divTitle"). CSS ("padding", "3px 5px 1px 5px");
    $ ("#divTitle"). CSS ("Color", "#FFFFFF");
    $ ("#divTitle"). CSS ("Font-weight", "bold");
    X's Style $ ("#x"). CSS ("float", "right");
    $ ("#x"). CSS ("cursor", "pointer");
  Divcontent's Style $ ("#divContent"). CSS ("padding", "10px");  } else{clienth = $ (window). Height ();  Browser Height CLIENTW = $ (window). width ();  Browser width div_x = (CLIENTW-DIVW)/2;  div horizontal div_y = (CLIENTH-DIVH)/2;  div ordinate div_x + = Window.document.documentElement.scrollLeft;  Div shows the actual horizontal axis div_y + = Window.document.documentElement.scrollTop;
    The actual ordinate of the div display if (div_y < mintop) {div_y = Mintop;  $ ("#divWindow"). CSS ("Left", (div_x + "px"));  Position the horizontal axis of the div $ ("#divWindow"). CSS ("Top", (div_y + "px")); Position Div's Ordinate}//Lock background screen function lockscreen () {if ($ ("#divLock"). Length = = 0) {//judge whether div exists Clienth = $ (window). He  Ight (); Browser height
    CLIENTW = $ (window). width ();  Browser width//var doch = $ ("body"). Height ();  Page height//var DOCW = $ ("Body"). width (); Page width//var BGW = clientw > DOCW?  CLIENTW:DOCW; Take effective wide//var BgH = clienth > doch?  Clienth:doch;
    Take a valid high $ ("body"). Append ("<div id= ' Divlock ' ></div>")//Add div $ ("#divLock"). Height (clienth);
    $ ("#divLock"). Width (CLIENTW);
    $ ("#divLock"). CSS ("Display", "block");
    $ ("#divLock"). CSS ("Background-color", "#000000");
    $ ("#divLock"). CSS ("position", "fixed");
    $ ("#divLock"). CSS ("Z-index", "100");
    $ ("#divLock"). CSS ("Top", "0px");
    $ ("#divLock"). CSS ("left", "0px");
  $ ("#divLock"). CSS ("opacity", "0.5");  } else{clienth = $ (window). Height ();  Browser Height CLIENTW = $ (window). width ();
    Browser width $ ("#divLock"). Height (clienth);
  $ ("#divLock"). Width (CLIENTW); }//Clear background Lock function Clearlockscreen () {$ ("#divLock"). Remove ();}//Clear div window function Cleardivwindow () {$ ("#divWindow"
). Remove (); }//Window size changes $ (WINdow). Resize (function () {if ($ ("#divLock"). Length!= 0) {lockscreen ();
      } if ($ ("#divWindow"). Length!= 0) {divopen ();
}
    }
);
  ----------------pop-up div imitation modal window end----------------//change style function Changestyle (stylename) {skinname = StyleName;
  Setcookie ("Skin", skinname);
  alert (stylename);
Window.location.reload ();

 }

More interested readers of jquery-related content can view the site topics: "jquery window Operation tips Summary", "jquery Extended Tips", "jquery common Plug-ins and Usage summary", "jquery drag and drop effects and tips summary," "JQuery Table" ( Table) Summary of operational techniques, "Summary of Ajax usage in jquery", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.