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框架的話，它的一個叫 模態框 的元件就封裝了這個功能，幾行程式碼就實現了，你只需要在模態框寫入文字，指明兩三個屬性值就行了。