The principle is simple:
Obtain the width and height of the current screen (form), because the size of the Form varies by browser. With this, the coordinates of the vertical center can be calculated. But why is the scroll bar still vertically centered? At this time, you need to obtain the height of the current form from the top of the page and add it to the Y axis coordinate just now.
$ (Document) is used to obtain the entire webpage, and $ (window) is used to obtain the current form. This should be clarified.
Finally, assign the obtained coordinates to the form. The form itself is absolutely located, so it can naturally be in the middle of the form.
Code:
Copy codeThe Code is as follows: <! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> the pop-up confirmation box is always in the middle of the window. </title>
<Style type = "text/css">
. Mask {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha (opacity = 50 ); display: none; z-index: 99 ;}
. Mess {position: absolute; display: none; width: 250px; height: 100px; border: 1px solid # ccc; background: # ececec; text-align: center; z-index: 101 ;}
</Style>
<Script type = "text/javascript" src = "jquery-1.6.1.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Btn'). click (function (){
Watermarks ('.mask'mirror.css ({'display': 'block '});
Center ($ ('. mess '));
Check ($ (this). parent (), $ ('. btn1'), $ ('. btn2 '));
});
// Center
Function center (obj ){
Var screenWidth = $ (window). width (), screenHeight = $ (window). height (); // the width and height of the current browser window
Var scrolltop = $ (document). scrollTop (); (), // get the height of the current window from the top of the page
Var objLeft = (screenWidth-obj. width ()/2;
Var objTop = (screenHeight-obj. height ()/2 + scrolltop;
Obj.css ({left: objLeft + 'px ', top: objTop + 'px', 'display': 'block '});
// When the browser window size changes
$ (Window). resize (function (){
ScreenWidth = $ (window). width ();
ScreenHeight = $ (window). height ();
Scrolltop = $ (document). scrollTop ();
ObjLeft = (screenWidth-obj. width ()/2;
ObjTop = (screenHeight-obj. height ()/2 + scrolltop;
Obj.css ({left: objLeft + 'px ', top: objTop + 'px', 'display': 'block '});
});
// Operations when the browser has a scroll bar,
$ (Window). scroll (function (){
ScreenWidth = $ (window). width ();
ScreenHeight = $ (widow). height ();
Scrolltop = $ (document). scrollTop ();
ObjLeft = (screenWidth-obj. width ()/2;
ObjTop = (screenHeight-obj. height ()/2 + scrolltop;
Obj.css ({left: objLeft + 'px ', top: objTop + 'px', 'display': 'block '});
});
}
// Confirm the canceled Operation
Function check (obj, obj1, obj2 ){
Obj1.click (function (){
Obj. remove ();
Closed ($ ('. mask'), $ ('. mess '));
});
Obj2.click (function (){
Closed ($ ('. mask'), $ ('. mess '));
});
}
// Hidden operations
Function closed (obj1, obj2 ){
Obj1.hide ();
Obj2.hide ();
}
});
</Script>
</Head>
<Body>
<Input type = "button" class = "btn" value = "btn"/>
<Div> the pop-up confirmation box is always in the middle of the window. </div>
<Div class = "mask"> </div>
<Div class = "mess">
<P> are you sure you want to delete it? </P>
<P> <input type = "button" value = "OK" class = "btn1"/>
<Input type = "button" value = "cancel" class = "btn2"/> </p>
</Div>
</Body>
</Html>
