Pop-up window support two modes, one is the General Information prompt box, call method: Popup.msgpopup (msg);
The other is to load the page pop-up window, call method: Popup.pagepopup (URL);
:
CSS Code
. BG{Background-color:#000;position:fixed;Z-index:9999; Left:0;Top:0;width:100%;Height:100%;Opacity:0.3;Filter:Alpha (OPACITY=50);-moz-opacity:0.5;}. Box{position:fixed;Min-width:400px;Min-height:150px; Left:50%;Top:50%;Margin-left:-200px;Margin-top:-75px;Height:Auto;Z-index:10000;Background-color:#fff;Border:Solid 1px #dddddd;}. Box_head{Background-color:#f7f7f7;Border-bottom:Solid 1px #dddddd;Height:30px;padding:10px;}. Box_warn{float: Left;letter-spacing:2px;font-size:16px;Font-weight:Bold;}. Box_close{background:URL ("/images/global.png") no-repeat-218px 3px;float: Right;width:19px;Height:19px;cursor:Pointer;}. Box_content{Min-width:100px;Min-height:50px;Color:#000000;font-size:16px;padding:20px;text-align:Center;}
jquery Code
varPopup =Newfunction() { This. Msgpopup =function(content) {appendhtml (); SetContent (content)}; This. Pagepopup =function(URL) {appendhtml (); LoadPage (URL)}; This. Closepopup =function() { $(". BG,. Box"). Hide ()}; functionsetcontent (content) {$ (". Box_content"). HTML (content)}functionloadPage (URL) {$ (". Box_content"). Load (URL)}functionappendhtml () {varboxhtml = ' <div class= ' bg ' ></div> '; Boxhtml+ = ' <div class= "box" ><div class= "Box_head" ><span class= "Box_warn" > Hints </span><span class= " Box_close "'
boxhtml + = ' onclick= ' $ (\ '. BG,. box\ '). Hide (); $ (\ ' body\ '). Removeclass (\ ' body_scroll\ '); " ></span></div><div class= "box_content" ></div></div> '; $("Body"). Append (boxhtml); varx = $ (". Box"). width (); vary = $ (". Box"). Height (); $(". Box"). CSS ("Margin-left",-(X/2)). CSS ("Margin-top",-(Y/2)); }};
A pop-up window I wrote with Jquery+css+div.