使用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>