【JavaScript】8.弹出框（Dialog）

最近做项目，用到了弹出框提示信息，就做了个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.onclick=function () {
        //显示遮罩层
        Back.style.display='block';
        //显示弹出窗口
        DialogBox.style.display='block';
    }
    DialogClose.onclick=function () {
        //隐藏遮罩层
        Back.style.display='none';
        //显示弹出窗口
        DialogBox.style.display='none';
    }
    Back.onclick=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.onclick=function () {
        ShowHide(true,Back,DialogBox);
    }
    DialogClose.onclick=function () {
        ShowHide(false,Back,DialogBox);
    }
    Back.onclick=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属性。通过这种方法，代码的复用性提高了很多，方法统一修改，引用。