zoukankan      html  css  js  c++  java
  • JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>无标题文档</title>
    <style type="text/css">
    /*弹出层的STYLE*/
    html,body {height:100%; margin:0px; font-size:12px;}

    .mydiv {
    background-color: #ff6;
    border: 1px solid #f90;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-weight: bold;
    z-index:99;
    300px;
    height: 120px;
    left:50%;/*FF IE7*/
    top: 50%;/*FF IE7*/

    margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
    margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

    margin-top:0px;

    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/

    _top:       expression(eval(document.compatMode &&
                document.compatMode=='CSS1Compat') ?
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

    }


    .bg {
    background-color: #ccc;
    100%;
    height: 100%;
    left:0;
    top:0;/*FF IE7*/
    filter:alpha(opacity=50);/*IE*/
    opacity:0.5;/*FF*/
    z-index:1;

    position:fixed!important;/*FF IE7*/
    position:absolute;/*IE6*/

    _top:       expression(eval(document.compatMode &&
                document.compatMode=='CSS1Compat') ?
                documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
                document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

    }
    /*The END*/

    </style>
    <script type="text/javascript">
    function showDiv(){
    document.getElementById('popDiv').style.display='block';
    document.getElementById('bg').style.display='block';
    }

    function closeDiv(){
    document.getElementById('popDiv').style.display='none';
    document.getElementById('bg').style.display='none';
    }

    </script>
    </head>

    <body>

    <div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/>
    <a href="javascript:closeDiv()">关闭窗口</a></div>
    <div id="bg" class="bg" style="display:none;"></div>

    <div style="padding-top: 20px;">
    <input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
    </div>
    </body>
    </html>

  • 相关阅读:
    Go 语言简介(下)— 特性
    Array.length vs Array.prototype.length
    【转】javascript Object使用Array的方法
    【转】大话程序猿眼里的高并发架构
    【转】The magic behind array length property
    【转】Build Your own Simplified AngularJS in 200 Lines of JavaScript
    【转】在 2016 年做 PHP 开发是一种什么样的体验?(一)
    【转】大话程序猿眼里的高并发
    php通过token验证表单重复提交
    windows 杀进程软件
  • 原文地址:https://www.cnblogs.com/zhangqifeng/p/1698564.html
Copyright © 2011-2022 走看看