JQuery pop-up layer, always displayed in the middle of the screen

1. Make the layer always appear in the middle of the screen:

Style code:

HTML code

1. . model{
2. Position:absolute; z-index:1003;
3. width:320px; height:320px; Text-align:center;
4. Background-color: #0066FF; Display:none;
5. }

jquery Code:

JS Code

2. Make the specified div always appear in the middle of the screen
4. function Letdivcenter (divname) {
6. var top = ($ (window). Height ()-$ (divname). Height ())/2;
8. var left = ($ (window). Width ()-$ (divname). Width ())/2;
10. var scrolltop = $ (document). ScrollTop ();
12. var scrollleft = $ (document). ScrollLeft ();
14. $ (divname). css ({position: ' absolute ', ' top ': Top + scrolltop, Left:left + scrollleft}). Show ();
16. }

HTML code:

HTML code

2. <a href="javascript:;" onclick="letdivcenter (' #model ')"> Point I let div always show in the middle of the screen </a><br / >
4. <div>
6. <div id="model" class="model">
8. This is the content (but not the vertical center display) I hope you master, can add. My little brother thanked me here.
10. </div>
12. </div>

Run it and look at the effect.

Next, summarize them and combine them into one. That is, when the div layer pops up, but also to pop up the mask layer, good, no nonsense to say, look at the code:

1. CSS style:

HTML code

2. <style type="Text/css">
4. . Mask {
6. Position:absolute; top:0px;  Filter:alpha (opacity=); Background-color: #777;
8. z-index:1002; left:0px;
10. opacity:0.5; -moz-opacity:0.5;
12. }
14. . model{
16. Position:absolute; z-index:1003;
18. width:320px; height:320px; Text-align:center;
20. Background-color: #0066FF; Display:none;
22. }
26. </style>

2. jquery Code:

HTML code

2. <script type="Text/javascript">
4. Compatible with Firefox, IE8
6. function Showmask () {
8. $ ("#mask"). CSS ("height", $ (document). Height ());
10. $ ("#mask"). CSS ("width", $ (document). width ());
12. $ ("#mask"). Show ();
14. }
16. Make the specified div always appear in the middle of the screen
18. function Letdivcenter (divname) {
20. var top = ($ (window). Height ()-$ (divname). Height ())/2;
22. var left = ($ (window). Width ()-$ (divname). Width ())/2;
24. var scrolltop = $ (document). ScrollTop ();
26. var scrollleft = $ (document). ScrollLeft ();
28. $ (divname). css ({position: ' absolute ', ' top ': Top + scrolltop, Left:left + scrollleft}). Show ();
30. }
32. function ShowAll (divname) {
34. Showmask ();
36. Letdivcenter (Divname);
38. }
40. </Script>

3.HTML Code:

HTML code

2. <div id="Mask" class="Mask"></div>
4. <a href= "javascript:;"  onclick= "Showmask ()"  > Dot I show mask layer </a>< br />  
6. <a href= "javascript:;"  onclick= "Letdivcenter (' #model ')" > Dot I let div always show in the middle of the screen </a>< br />  
8. <a href="javascript:;" onclick="showall (' #model ')"> Point I show All </a><br />
10. <div>
12. <div id="model" class="model">
14. This is the content (but not the vertical center display) I hope you master, can add. My little brother thanked me here.
16. </div>
18. </div>

JQuery pop-up layer, always displayed in the middle of the screen