用 js 實現“div的遮罩”效果

需求：點擊“排序”按鈕，生成div遮罩效果，如圖：

html代碼：兩個按鈕

<input type="button" class="button1" value="排序" style="margin-left:30px;" οnclick="showDiv()"/>
<input type="button" class="button2" value="字段" οnclick="showDiv()"/>

html代碼：遮罩效果

<div class="container_div"><!-- 遮罩 -->
    <div id="bg"></div>
    <div id="show">
        排序<hr />
        <form action="#" method="post">
            <table>
                <tr>
                    <td>狀態：</td>
                    <td class="zhezhao_value"><select>
                            <option>發文</option>
                            <option>收文</option>
                        </select></td>
                </tr>
                <tr>
                    <td>公文類型：</td>
                    <td class="zhezhao_value"><select>
                            <option>通知</option>
                            <option>公告</option>
                        </select></td>
                </tr>
            </table>
            <div class="btn_div">
                <input type="submit" class="submit" value="確定" />
                <input type="button" class="concel" value="取消" οnclick="hideDiv()" />
                <input type="reset" class="reset" value="清空"  />
            </div>
         </form>
    </div>
</div>

其中，id=bg 爲遮罩背景，id=show 爲遮罩顯示內容。

下面是 css 樣式代碼：重點是#bg 寬高設置，和 #show寬高設置，以及position 屬性設置。

#bg{ 
	display: none; 
	position: absolute; 
	top: 0%; 
	left: 0%; 
	width: 100%; 
	height: 100%; 
	background-color: black; 
	z-index:1001; 
	-moz-opacity: 0.3; 
	opacity:.30; 
	filter: alpha(opacity=30);
}

#show{ 
	display: none; 
	position: absolute; 
	top: 25%; 
	left: 32%; 
	width: 33%; 
	height: auto; 
	padding: 8px;
	border: 8px solid #E8E9F7; 
	background-color: white; 
	z-index:1002; 
	overflow: auto;
}

最後是 js代碼：

function showDiv() { 
	document.getElementById("bg").style.display ="block";
	document.getElementById("show").style.display ="block";
}

function hideDiv(){
	document.getElementById("bg").style.display ="none";
	document.getElementById("show").style.display ="none";	
}