HTML中DIV提示框的实现
HTML中DIV提示框的实现
点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。
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。
相关推荐
89510194 2019-12-31
开心就好 2019-08-27
xiaohuli 2019-06-29
libowen0 2018-06-04
hhhkhhh 2017-07-20
杉林的HelloWord 2015-11-24
83510998 2015-08-18
dangzhangjing 2019-06-27
语帆 2015-04-15
小肖 2014-07-16
teresalxm 2014-04-30
CoderChang 2014-04-30
hjfbluesky 2014-03-05
83443560 2013-09-06
统一开发环境UDE 2013-02-05
JeWangZhe 2012-08-30