瀚海沙

因为初学javascript，所以对于使用原生js来表达一些效果，根本不会。这段时间，在做圣诞节的活动，碰到了要写一个遮罩层，然后上面一个弹窗的效果，在网上可以找到很多素材。但是，也想要自己来写一个，一边学习，一边测试下学习效果。于是，在w3cshool上，翻看基础知识，然后琢磨着，就弄了一个效果。

首先，整个动作的描述就是，一个按钮，然后触发一个事件，然后弹出一个对话框。

于是，在html里的框架就是一个按钮，一个弹出窗口，一个遮罩层：

<div id="popDiv" class="mydiv" style="display:none;">
恭喜你！<br/>
你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a>
</div>
<div id="bg" class="bg" style="display:none;"></div>

<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>

看的时候，可以忽略掉所有的样式。

从上面的代码分析，我们要点击”显示层“这个按钮，弹出遮罩层和对话框。点击“关闭窗口”则，关闭遮罩层和对话框。只需设置对象的display属性就可以实现。因此，它的js代码就如下：

	function showDiv(){
		document.getElementById('popDiv').style.display='block';
		document.getElementById('bg').style.display='block';
	}
	function closeDiv(){
		document.getElementById('popDiv').style.display='none';
		document.getElementById('bg').style.display='none';
	}

对于，css部分的代码，大家可以根据自己的需求进行修饰。

html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
position: absolute;
z-index: 99;
left:40%;/*FF IE7*/
top: 40%;/*FF IE7*/

}


.bg {
background-color: #000;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=80);/*IE*/
opacity:0.8;/*FF*/
z-index:2;
position: absolute;
}

这样一个简单的模型就已经完成了。比起，下了一堆的代码和引入很多的jquery文件显得精简很多。大家可以试试。