<HTML>
<Head>
<Style>
Div. titlebar {Background: #2279f3; margin: 0px auto; width: 100%; Height: 21px; Border: # 0000ff solid 1px ;}
Div. closebutton {float: Right ;}
Div. mainbody {margin: auto ;}
# Divmodaldialog {border: solid 1px; Background: white; position: absolute; left: 0px; top: 0px; display: none; Z-index: 2; Height: 200px; width: 350px ;}
# Divmodal {background-color: # ece9d8; filter: alpha (opacity = 50); opacity: 0.5; left: 0px; position: absolute; top: 0px}
</Style>
<SCRIPT>
Function showmodel ()
{
Divmodaldialog. style. Display = "Block ";
Resizemodal ();
Window. onresize = resizemodal;
Doselect ("hidden ");
}
Function closemodel ()
{
Divmodal. style. width = "0px ";
Divmodal. style. Height = "0px ";
Divmodaldialog. style. Display = "NONE ";
Window. onresize = NULL;
Doselect ("visible ");
}
Function doselect (Status)
{
VaR allobj = Document. getelementsbytagname ("select ");
For (I = 0; I <allobj. length; I ++ ){
If (allobj [I]. getattribute ("hide ")! = "True "){
Allobj [I]. style. Visibility = status;
}
}
}
Function resizemodal ()
{
Divmodal. style. width = Document. Body. scrollwidth;
Divmodal. style. Height = Document. Body. scrollheight;
Divmodaldialog. style. Left = (document. Body. offsetwidth-divmodaldialog. offsetwidth)/2 );
Divmodaldialog. style. Top = (document. Body. offsetheight-divmodaldialog. offsetheight)/2 );
}
VaR mouseoffset = NULL;
VaR imousedown = false;
Function mousemove (EV ){
Ev = EV | window. event;
VaR mousepos = mousecoords (EV );
If (imousedown ){
Divmodaldialog. style. Left = mousepos. x-mouseOffset.x;
Divmodaldialog. style. Top = mousepos. y-mouseOffset.y;
}
}
Function mouseup (EV ){
Imousedown = false;
}
Function mousedown (EV ){
Ev = EV | window. event;
VaR target = ev.tar GET | eV. srcelement;
If (target. getattribute ("ID") = "title "){
Imousedown = true;
Mouseoffset = getmouseoffset (target, Ev );
}
}
Function mousecoords (EV ){
If (EV. pagex | eV. Pagey ){
Return {X: eV. pagex, Y: eV. Pagey };
}
Return {
X: eV. clientx + document. Body. scrollleft-document. Body. clientleft,
Y: eV. clienty + document. Body. scrolltop-document. Body. clienttop
};
}
Function getmouseoffset (target, Ev ){
Ev = EV | window. event;
VaR docpos = getposition (target );
VaR mousepos = mousecoords (EV );
Return {X: mousepos. X-docpos. X, Y: mousepos. Y-docpos. y };
}
Function getposition (e ){
VaR left = 0;
VaR Top = 0;
While (E. offsetparent ){
Left + = E. offsetleft;
Top + = E. offsettop;
E = E. offsetparent;
}
Left + = E. offsetleft;
Top + = E. offsettop;
Return {X: Left, Y: Top };
}
Document. onmousemove = mousemove;
Document. onmousedown = mousedown;
Document. onmouseup = mouseup;
</SCRIPT>
</Head>
<Body>
<Input type = "button" value = "Click here" onclick = "showmodel ()"/>
<Br> <BR> <br>
<SELECT> <option> A </option> <option> B </option> </SELECT>
<! -- Because Div does not cover select, all the select statements are hidden in the real dialog box and displayed when the select statements are closed. -->
<! -- If you have a SELECT statement that will always be hidden, it will be displayed when the dialog box is closed. -->
<! -- You can add the hide = "true" attribute to keep him hidden, just like the following -->
<Select hide = "true" style = "visibility: hidden"> <option> A </option> <option> B </option> </SELECT>
<Br> <BR> <br>
<Input>
<! -- Transparent mask -->
<Div id = "divmodal"> </div>
<! -- Transparent mask end -->
<! -- Modal window -->
<Div id = "divmodaldialog">
<Div class = "titlebar" id = "title">
<Div class = "closebutton"> <a href = "javascript: closemodel ();"> [x] </a> </div>
</Div>
<Div class = "mainbody">
Add content here
</Div>
</Div> <! -- Modal window end -->
</Body>
</Html>