div弹出层

最新推荐文章于 2023-05-12 09:49:20 发布

jingmeifeng

最新推荐文章于 2023-05-12 09:49:20 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签： div class javascript ie border float

本文链接：https://blog.csdn.net/jingmeifeng/article/details/7794608

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head runat="server">
    <title>DIV始终居中的半透明弹出层</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            margin: 0px;
            font-size: 12px;
        }
        .mydiv
        {
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            font-weight: bold;
            z-index: 999;
            width: 300px;
            height: 200px;
            left: 50%;
            top: 50%;
            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
        {
            display: none;
            background: #eeeeee;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0; /*FF IE7*/
            filter: alpha(opacity=50); /*IE*/
            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);
        }
    </style>
    <style>
        body, p
        {
            margin: 0;
            padding: 0;
            text-align: center;
            font: normal 14px/180% Tahoma,sans-serif;
        }
        #loginBox
        {
            margin: 0 auto;
            padding: 0px;
            border: 1px solid #829AFF;
            filter: alpha(opacity=90);
        }
        #loginBox .title
        {
            text-align: left;
            padding-left: 10px;
            font-size: 11pt;
            border-bottom: 1px solid #829AFF;
            height: 25px;
            line-height: 25px;
            cursor: move;
        }
        #loginBox .t1
        {
            float: left;
            font-weight: bold;
            text-decoration: none;
        }
        #loginBox .t2
        {
            float: right;
            text-align: center;
            line-height: 18px;
            height: 18px;
            width: 18px;
            margin-top: 3px;
            margin-right: 2px;
            overflow: hidden;
            border: 1px solid #FF5889;
            cursor: pointer;
        }
        #loginBox .login
        {
            text-align: center;
            width: 100%;
            height: 100%;
        }
        
        input.submit
        {
            float: right;
            border: 1px solid #829AFF;
            font-size: 9pt;
            height: 20px;
            margin-top: 5px;
            margin-right: 70px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function showDiv() {
            document.getElementById('loginBox').style.display = 'block';

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


        }
    </script>
</head>
<body>
    <div id="loginBox" class="mydiv" style="display: none; background: #eeeeee;">
        <p class="title" id="Mdown">
            <span class="t1">登录</span><span class="t2" title="关闭" οnclick="javascript:closeDiv()">X</span></p>
        <div class="login" style="z-index: 1000;">
            <form method="post" action="#">
            用户名:<input type="text" name="UserName" size="12" maxlength="10" value=""><div class="login">
                密 码:<input type="text" name="Password" size="12" maxlength="10"></div>
            <input class="submit" type="submit" value="登录"></form>
        </div>
    </div>
    <div id="bg" class="bg" style="display: none;">
    </div>
    <a href="javascript:showDiv()">点击这里弹出层</a>
</body>