最近做项目,用到了弹出框提示信息,就做了个demo,记录总结了一下,对一般的网站来说,弹出框是比较常见的。或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等。但是由于浏览器自带的弹出窗口alert,confirm,prompt样式比较单调,且不同的浏览器有不同的默认样式设置,所以在日常工作中,给网站做一个自定义的弹出框非常必要。
html部分
<button class="btn" id="JS_dialog">Click Me!</button>
<!--遮罩层-->
<div class="black" id="black"></div>
<!--弹出框盒子-->
<div class="dialog" id="dialogBox">
<span style="display: inline-block;">活动收费</span><span class="dialog_close" style="display: inline-block;padding-left: 470px;border-bottom: 1px solid #eee;">X</span>
<h3 class="dialog_title">活动收费</h3>
<div class="dialog_content">此活动需要收取报名费100元</div>
</div>
html由3部分组成,触发弹出框按钮button,弹出框遮罩层black,弹出框盒子dialog包裹弹出框的所有内容,写html结构时注意他们三部分是平级关系。
css代码部分
<style>
.black{
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0,0,0,0.1);
top:0;
left:0;
}
.dialog{
display: none;
position: fixed;
z-index: 3;
width: 500px;
min-height: 300px;
top:50%;
left:50%;
margin: -150px 0 0 -250px;
background: #fff;
padding: 15px;
border-radius: 5px;
}
</style>
关键环节是需要给遮罩层和弹出框盒子设置固定定位。遮罩层需要全屏覆盖,所以宽度设置为100%,在未触发状态他们都应该处于display:none;隐藏状态。当出发时直接显示。
js代码
弹出框的一般效果:
当我们点击黑色透明区域或者x时,都会将弹出框和遮罩层关闭,以下是这个效果实现的js代码部分:
<script>
var doc=document;
var Btn=doc.getElementById('JS_dialog'),
Back=doc.getElementById('black'),
DialogBox=doc.getElementById('dialogBox'),
DialogClose=DialogBox.getElementsByClassName('dialog_close')[0];
Btn.οnclick=function () {
//显示遮罩层
Back.style.display='block';
//显示弹出窗口
DialogBox.style.display='block';
}
DialogClose.οnclick=function () {
//隐藏遮罩层
Back.style.display='none';
//显示弹出窗口
DialogBox.style.display='none';
}
Back.οnclick=function () {
//隐藏遮罩层
Back.style.display='none';
//显示弹出窗口
DialogBox.style.display='none';
}
</script>
首先我们要逐个获取相关元素,包括:触发的按钮Btn,遮罩层Back,弹出框盒子DialogBox,弹出框盒子自己的关闭按钮DialogClose。由于都会用到公共的document,这里由doc这个变量来代替。获取完了相关元素后,给对应的元素添加相应的点击事件已触发相关行为。Btn点击时将打开我们的盒子,遮罩层和弹出框盒子都应当显示出来,修改他们的display属性;弹出框被打开后,点击DialogClose或者Back(其他黑色区域时)都需要将其关闭,修改他们的display属性为none,到这里一个基本的弹出框就制作完毕。
优化:
由于每一个click事件都是触发相关元素的显隐控制,可以考虑使用一个公共方法,传递不同的参数来实现这个功能。
<script>
var doc=document;
var Btn=doc.getElementById('JS_dialog'),
Back=doc.getElementById('black'),
DialogBox=doc.getElementById('dialogBox'),
DialogClose=DialogBox.getElementsByClassName('dialog_close')[0];
Btn.οnclick=function () {
ShowHide(true,Back,DialogBox);
}
DialogClose.οnclick=function () {
ShowHide(false,Back,DialogBox);
}
Back.οnclick=function () {
ShowHide(false,Back,DialogBox);
}
function ShowHide(Boolean,item1,item2) {
for(var i=1,len=arguments.length;i<len;i++){
if(Boolean){
arguments[i].style.display="block";
}else{
arguments[i].style.display="none";
}
}
}
</script>
这里写了一个公共方法ShowHide()函数,接收的第一个参数为显隐阀门的布尔值,其他参数为需要进行同时控制的元素。这里我们使用到函数自身的arguments对象,arguments里面保存了该函数传递进来的所有参数,这里当做一个数组使用,用一个for循环迭代arguments,参数的第一项是布尔值,用来决定显隐关系,所以for循环i的第一个参数为1,依次给其他各项设置style属性。通过这种方法,代码的复用性提高了很多,方法统一修改,引用。