用 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";	
}