JS弹出浮层

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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=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弹出浮层的主要内容，如果未能解决你的问题，请参考以下文章

验收测试0615

前端 学习思路

react 开发中的问题简记

Ant Design Pro使用之--EditableProTable 可编辑表格

Selenium-js弹窗浮层

页面弹出全屏浮层或遮罩时，禁止底层body滚动