After several twists and turns, I finally got it, as shown below:
Specific implementation:
(1) Compile jquery. divbox. js code:
Copy codeThe Code is as follows:
JQuery. fn. extend (
{
OpenDiv: function ()
{
Var sWidth, sHeight;
SWidth = window. screen. availWidth;
If (window. screen. availHeight> document. body. scrollHeight)
{
SHeight = window. screen. availHeight;
} Else
{
SHeight = document. body. scrollHeight + 20;
}
Var maskObj = document. createElement ("div ");
MaskObj. setAttribute ('id', 'bigdiv ');
MaskObj. style. position = "absolute ";
MaskObj. style. top = "0 ";
MaskObj. style. left = "0 ";
MaskObj. style. background = "#111 ";
MaskObj. style. filter = "Alpha (opacity = 70 );";
MaskObj. style. opacity = "0.7 ";
MaskObj. style. width = sWidth + "px ";
MaskObj. style. height = sHeight + "px ";
MaskObj. style. zIndex = "10000 ";
$ ("Body"). attr ("scroll", "no ");
Document. body. appendChild (maskObj );
$ ("# BigDiv"). data ("divbox_selectlist", $ ("select: visible "));
$ ("Select: visible"). hide ();
$ ("# BigDiv"). attr ("divbox_scrolltop", $. ScrollPosition (). Top );
$ ("# BigDiv"). attr ("divbox_scrollleft", $. ScrollPosition (). Left );
$ ("# BigDiv"). attr ("htmloverflow", $ ("html" ).css ("overflow "));
$ ("Html" ).css ("overflow", "hidden ");
Window. scrollTo ($ ("# BigDiv"). attr ("divbox_scrollleft"), $ ("# BigDiv"). attr ("divbox_scrolltop "));
Var MyDiv_w = this. width ();
Var MyDiv_h = this. height ();
MyDiv_w = parseInt (MyDiv_w );
MyDiv_h = parseInt (MyDiv_h );
Var width = $. PageSize (). Width;
Var height = $. PageSize (). Height;
Var left = $. ScrollPosition (). Left;
Var top = $. ScrollPosition (). Top;
Var Div_topposition = top + (height/2)-(MyDiv_h/2 );
Var Div_leftposition = left + (width/2)-(MyDiv_w/2 );
This.css ("position", "absolute ");
This.css ("z-index", "10001 ");
This.css ("background", "# fff ");
This.css ("left", Div_leftposition + "px ");
This.css ("top", Div_topposition + "px ");
If ($. browser. mozilla)
{
This. show ();
Return;
}
This. fadeIn ("fast ");
}
, CloseDiv: function ()
{
If ($. browser. mozilla)
{
This. hide ();
} Else
{
This. fadeOut ("fast ");
} $ ("Html" ).css ("overflow", $ ("# BigDiv"). attr ("htmloverflow "));
Window. scrollTo ($ ("# BigDiv"). attr ("divbox_scrollleft"), $ ("# BigDiv"). attr ("divbox_scrolltop "));
$ ("# BigDiv"). data ("divbox_selectlist"). show ();
$ ("# BigDiv"). remove ();
}
});
$. Extend (
{
PageSize: function ()
{
Var width = 0;
Var height = 0;
Width = window. innerWidth! = Null? Window. innerWidth: document.documentelement&document.doc umentElement. clientWidth? Document.doc umentElement. clientWidth: document. body! = Null? Document. body. clientWidth: null;
Height = window. innerHeight! = Null? Window. innerHeight: document.documentelement&document.doc umentElement. clientHeight? Document.doc umentElement. clientHeight: document. body! = Null? Document. body. clientHeight: null;
Return {Width: width, Height: height };
}
, ScrollPosition: function ()
{
Var top = 0, left = 0;
If ($. browser. mozilla)
{
Top = window. pageYOffset;
Left = window. pageXOffset;
}
Else if ($. browser. msie)
{
Top=document.doc umentElement. scrollTop;
Left+document.doc umentElement. scrollLeft;
}
Else if (document. body)
{
Top = document. body. scrollTop;
Left = document. body. scrollLeft;
}
Return {Top: top, Left: left };
}
});
(2) Two js, jquery. divbox. js and jquery. js, must be referenced in the webpage.
(3) test page code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> test </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/jquery. divbox. js"> </script>
<Style>
# DivSCA
{
Position: absolute;
Width: 700px;
Height: 500px;
Font-size: 12px;
Background: # fff;
Border: 0px solid #000;
Z-index: 10001;
Display: none;
}
</Style>
<Script type = "text/javascript">
Function openDiv (){
$ ("# DivSCA"). OpenDiv ();
}
Function closeDiv (){
$ ("# DivSCA"). CloseDiv ();
}
</Script>
</Head>
<Body>
<Div id = "divSCA">
<Font size = "50"> This is a modal DIV. Click CLOSE </font>
<Input type = "button" value = "close" onclick = "closeDiv ()">
</Div>
<Input type = "button" value = "pop-up" onclick = "openDiv ()"/>
Test whether the select statement can be overwritten.
<Select>
<Option> Test 1 </option>
<Option> Test 2 </option>
<Option> Test 3 </option>
</Select>
</Body>
</Html>
(4) test code and source files:
Click to download