原生js编写带遮罩的弹出层

2015-12-08 15:10:00 作者:mangocool 弹出层, 遮罩, js

因为初学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文件显得精简很多。大家可以试试。

© hanhaisha.com. All Rights Reserved

梦里不知岁月匆、梦醒不知韶华过