【JavaScript】8.弹出框（Dialog）

叁歲伎倆 2022-06-01 13:06 315阅读 0赞

最近做项目，用到了弹出框提示信息，就做了个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代码部分**

关键环节是需要给遮罩层和弹出框盒子设置固定定位。遮罩层需要全屏覆盖，所以宽度设置为100%，在未触发状态他们都应该处于display:none;隐藏状态。当出发时直接显示。

**js代码**  
弹出框的一般效果：

![SouthEast][]

当我们点击黑色透明区域或者x时，都会将弹出框和遮罩层关闭，以下是这个效果实现的js代码部分：

**首先我们要逐个获取相关元素，包括：触发的按钮Btn，遮罩层Back，弹出框盒子DialogBox，弹出框盒子自己的关闭按钮DialogClose。由于都会用到公共的document，这里由doc这个变量来代替。获取完了相关元素后，给对应的元素添加相应的点击事件已触发相关行为。Btn点击时将打开我们的盒子，遮罩层和弹出框盒子都应当显示出来，修改他们的display属性；弹出框被打开后，点击DialogClose或者Back（其他黑色区域时）都需要将其关闭，修改他们的display属性为none，到这里一个基本的弹出框就制作完毕。**

**优化：**

由于每一个click事件都是触发相关元素的显隐控制，可以考虑使用一个公共方法，传递不同的参数来实现这个功能。

这里写了一个公共方法ShowHide()函数，接收的第一个参数为显隐阀门的布尔值，其他参数为需要进行同时控制的元素。这里我们使用到函数自身的arguments对象，arguments里面保存了该函数传递进来的所有参数，这里当做一个数组使用，用一个for循环迭代arguments，参数的第一项是布尔值，用来决定显隐关系，所以for循环i的第一个参数为1，依次给其他各项设置style属性。通过这种方法，代码的复用性提高了很多，方法统一修改，引用。

[SouthEast]: /images/20220601/7b4fb37a77cf4f15b6b629f8ca9b2cfa.png