html + css + js 原生 弹出提示框的实现

功能分析：
在一个页面中，有一个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框架的话，它的一个叫 模态框 的组件就封装了这个功能，几行代码就实现了，你只需要在模态框写入文本，指明两三个属性值就行了。