功能分析:
在一个页面中,有一个div块,我想这样操作它:
刚进入该页面,这个div 不显示,当点击该页面的某个按钮,该div会显示,且 其余部分变成灰色的 且不可进行操作:
本案例使用删除作为div块 进行说明演示:效果如下:
期待效果如下:
html:
<a href="javascript:void(0)" onclick="deleteUser('${user.id}')"
class="removeUser">
<img src="images/shanchu.png" alt="删除" title="删除"/>
</a>
javascript:void(0) 表示点击此超链接不跳转,只执行onclick指定的方法。
下面是这个div:
<div class="zuse"></div> <!--负责遮住页面,遮住后页面变黑,无法进行任何操作-->
<div class="remove" id="removeUse">
<div class="removerChid">
<h2>提示</h2>
<div class="removeMain">
<p>你确定要删除该用户吗?</p>
<a href="javascript:void(0)" id="yes" onclick="deleteUsers()">确定</a>
<a href="#" id="no">取消</a>
</div>
</div>
</div>
css样式:
/*点击删除按钮后弹出的层*/
.zuse {
display: none; /*none表示不显示,被隐藏;修改为block后会使整个页面被阻塞*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
overflow: hidden;
}
.remove{
display: none; /* 修改这里可以让删除框消失*/
width: 400px;
height: 190px;
position: absolute;
top: 200px;
left:500px;
background: #fff;
border-radius: 4px;
}
js代码:
var ids;
function deleteUser(id) {
ids = id;
$('.zhezhao').css('display', 'block'); // 页面阻塞
$('#removeUse').fadeIn(); // 提示框弹入到界面
// fadeIn():淡入效果,是jQuery的方法,使标签元素的透明度从0到100%显示出来
// fadeOut():淡出效果,也是jQuery的方法,使标签透明度从100% ~ 0 消失
}
// 点击确定按钮,进入此方法,执行删除用户的servlet
function deleteUsers() {
window.location.href="<%=request.getContextPath()%>/deleteServlet?id="+ids;
}
效果如下:
这是原生 html + css + js 实现 弹出提示框 并遮蔽页面 的功能,思路并不复杂,就是你得知道一些css样式的属性。
另外,如果你学过bootstrap框架的话,它的一个叫 模态框 的组件就封装了这个功能,几行代码就实现了,你只需要在模态框写入文本,指明两三个属性值就行了。