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刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM