JS弹出浮层

weixin_30564785

于 2016-02-24 21:06:00 发布

阅读量177

点赞数

文章标签：前端 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/dreamhome/p/5215179.html

版权

<!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>

转载于:https://www.cnblogs.com/dreamhome/p/5215179.html

weixin_30564785

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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><...
复制链接

扫一扫