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