網頁：單擊按鈕彈出懸浮窗+頁面遮罩
- 效果：
單擊按鈕彈出懸浮窗+頁面遮罩 #yyds幹貨盤點#網頁：單擊按鈕彈出懸浮窗+頁面遮罩 - 頁面代碼：
<html>
<head lang="en">
<head>
<meta charset="UTF-8">
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #c8c8c8;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=78);
}
.pop_win {
display: none;
position: absolute;
top: 10%;
left: 23%;
width: 55%;
height: 75%;
padding: 10px;
border: 2px solid rebeccapurple;
background-color: white;
z-index:9999;
overflow: auto;
}
</style>
<script type="text/javascript">
function popWin(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeWin() {
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none'
}
</script>
</head>
<body>
<p>網頁：單擊按鈕彈出懸浮窗+頁面遮罩</p>
<a rel="nofollow" href = "javascript:void(0)" onclick = "popWin();">請點這裡</a>
<div id="light" class="pop_win">
<a rel="nofollow" href = "javascript:void(0)" onclick = "closeWin();" style="float: right;">[x]</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
![鋼鐵平面焊接的缺陷檢測案例【附代碼】[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)