JS實現當前頁彈出窗口，且頁面變灰不可操作

本文轉載自查看原文 2018-09-13 13:58 2646 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現彈出窗口、頁面變成灰色並不可操作的例子 js實現彈出窗口、頁面變成灰色並不可操作的例子 jQuery的click事件在當前頁彈出層窗口（不打開新頁面） js實現頁面跳轉,和獲取當前頁面地址 js刷新當前頁面 js 刷新當前頁面會彈出提示框怎樣將這個提示框去掉 js獲取上一頁、當前頁及域名url Vue.js刷新當前頁面 JS獲取當前頁面名稱原生js中打開另一個窗口頁面，選擇數據后傳遞給當前頁面中