JS实现当前页弹出窗口，且页面变灰不可操作

使用JS在当前页面在div中加载弹出窗口，并让当前页面变灰不可操作。

加载弹出窗口的div需将宽高设置成整个页面的大小，以覆盖当前页面的内容。

opacity：0.6；  页面可见度设置为0.6（1为完全不可见）。
z-index: 1024； 设置元素堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。并且只能在定位元素上奏效（例如 position:absolute;）

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现弹出窗口，页面变灰不可操作</title>
<script src="../js/jquery.js"></script>
<style type="text/css">
    .opacity_bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
        margin: auto;
        z-index: 1024;
        display: none;
    }    
    #dialog {
        position: absolute;
        top: 30%;
        left: 40%;
        z-index: 1025;
    }
</style>
<script type="text/javascript">
    function alertWin(){
        $(".opacity_bg").show(); // 显示背景层,覆盖当前页面内容
        $("#dialog").load("../jsp/alert.html");    // 加载弹出页
    }
    function iclose(){
        $(".opacity_bg").hide(); // 隐藏背景层
        $("#dialog").empty().hide(); // 清除弹出页
    }
</script>
</head>
<body>
    <div>
        <div class="opacity_bg"></div>
        <div id="dialog"></div>
        <button onclick="alertWin();">弹出窗口</button>
    </div>
</body>
</html>

alert.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <div>
        <h1 style="color:#fff;">弹出的子页面</h1>
        <button onclick="iclose();">点击关闭</button>
    </div>
</body>
</html>

 

posted @ 2018-09-13 13:58  hello龙兄  阅读(5395)  评论(0)  编辑  收藏  举报