HTML中DIV提示框的实现
aperson 2016-06-29
点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。
HTML代码：
<!DOCTYPEhtml>
<html>
<head></head>
<body>
<!--页面其他内容-->
<buttonclass="btn"onclick="show_popup_input()"></button>
<!—提示框底层蒙版-->
<divclass="mask"></div>
<!--提示框-->
<divclass="bomb_box">。。。。。</div>
</body>
</html>
JS代码：
//展示隐藏的DIV块
functionshow_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。
相关推荐
本文实例讲述了jQuery基于闭包实现的显示与隐藏div功能。分享给大家供大家参考，具体如下：。<p>当前手机号码：<span id="oldPhone">$!{user.phone}</span>&