网页弹窗居中显示

浏览数：25 / 时间：2015年06月09日

让网页中的一个弹窗居中显示

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>始终在中间DIV (支持IE FF)</title>
6 <!doctype html>
7 <style type="text/css">
8 html,body {height:100%; margin:0px; font-size:12px;}
9 .mydiv {
10 background-color: #f9fff6;
11 border: 1px solid #009900;
12 text-align: center;
13 line-height: 50px;
14 font-size: 13px;
15 font-weight: bold;
16 z-index:99;
17 width: 300px;
18 height: 50px;
19 left:50%;/*FF IE7*/
20 top:50%;/*FF IE7*/
21
22 margin-left:-150px!important;/*FF IE7 half of its width */
23 margin-top:-60px!important;/*FF IE7 half of its height*/
24
25 margin-top:0px;
26 position:fixed!important;/*FF IE7*/
27 position:absolute;/*IE6*/
28
29 _top:       expression(eval(document.compatMode &&
30             document.compatMode==‘CSS1Compat‘) ?
31             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
32             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
33
34 }
35 </style>
36 <script language="javascript" type="text/javascript">
37     function showDiv(){
38         document.getElementById(‘popDiv‘).style.display=‘block‘;
39     }
40     window.onload=function(){
41         showDiv();
42     }
43 </script>
44 </head>
45
46 <body>
47 <div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
48 </div>
49
50 </body>

51 </html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

网页弹窗居中显示