HTML中DIV提示框的实现
点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。
HTML代码：
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--页面其他内容-->
<button class="btn" onclick="show_popup_input()"></button>
<!—提示框底层蒙版 -->
<div class="mask"></div>
<!-- 提示框-->
<div class="bomb_box">。。。。。</div>
</body>
</html>
JS代码：
//展示隐藏的DIV块
function show_popup_input(){
$(".mask").show();
$(".bomb_box").show();
}
CSS代码：
/*蒙版，使底层页面无法执行任何操作*/
.mask{
display:none; /*设置蒙版为隐藏元素*/
/*绝对定位，设置蒙版在页面的位置*/
position:absolute;
top:0;
left:0;
/*设置蒙版的大小为整个页面*/
width:100%;
height:100%;
background:#fff;
z-index:10;
/*设置DIV元素的不透明级别*/
opacity:0.4;
}
/*提示框*/
.bomb_box {
display:none; /*设置提示框为隐藏元素*/
/*绝对定位，设置提示框在页面的位置*/
position:absolute;
top:320px;
left:500px;
background:#fff;
z-index:20;
}
注意：提示框的z-index>蒙版的z-index>body内其他元素的z-index。