JS弹出浮层

时间：2016-02-24 22:47:05 阅读：331 评论：0 收藏：0 [点我收藏+]

标签：

<!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=utf-8" />
<title>JS弹出浮层</title>
<style type="text/css">
.my_div {
    background-color: #ff6;
    border: 1px solid #f90;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-weight: bold;
    z-index: 2;
    width: 600px;
    height: 220px;
    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
            :
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/
        );
    /*IE5 IE5.5*/
}

.bg_div {
    background-color: #ccc;
    width: 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
            :
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/
        );
    /*IE5 IE5.5*/
}
/*The END*/
</style>
<script type="text/javascript">
function showDiv(){
    document.getElementById(‘my_div‘).style.display=‘block‘;
    document.getElementById(‘bg_div‘).style.display=‘block‘;
}

function closeDiv(){
    document.getElementById(‘my_div‘).style.display=‘none‘;
    document.getElementById(‘bg_div‘).style.display=‘none‘;
}

</script>
</head>

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



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

JS弹出浮层

标签：

原文地址：http://www.cnblogs.com/dreamhome/p/5215179.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行