首页 > 代码库 > 制作一个有模态的弹出层

制作一个有模态的弹出层

2024-07-13 07:24:53   225人阅读

参考慕课网课程《分享：阿当大话西游之WEB组件》

定制不同的皮肤可通过对元素添加或减少class类来实现。
首先，模态是指如下图部分的灰色背景部分：（灰色部分不可点击）

ZC}3()][)VDKS[3BP0LS$~J.jpg
然后，要记住，模态要加在当前页面的上面，以及当前操作框（通常是一个弹出层）的下面
所谓上面，下面是指：
如果模态（通常是一个div）的定位是fixed（固定定位）的，那么它将不占据文档空间，
所以，将其height和width设置为100%，另外，设置left:0;top:0。即为铺满整个屏幕。
然后，在html中，处于此div之前的元素将不可触及。
那么如何让弹出层可以被focus呢？
答案就是让让此弹出层处于模态之后，然后同样设置position:fixed(固定定位)，调整其
top,left等，让其位置和模态发生”重叠“，由于它是处于模态之后的，所以位置重叠的情况下，
浏览器会将其放到上面来，但是其z-index值并没有发生改变。
（通常也不通过设置z-index的值来特意让模态处于弹出层的下方，因为这样会让原本页面的元素
处于模态之上，从而可以被操作，这样就达不到模态想要的结果）。

失败的代码：                        
            function mask(){
                var masknode = document.createElement("div");
                masknode.className="mask";
                masknode.id="window_mask";
                document.body.appendChild(masknode);
            }

这里的关键是：appendChild操作会将节点插到body的最后面，这样在它之前的所有元素都将被覆盖
从而连弹出层都得不到焦点，不能操控。

成功的代码：
                       
            function mask(){  
               var masknode = document.createElement("div");
                masknode.className="mask";
                masknode.id="window_mask";
                /*在Box之前插入mask*/
                document.body.insertBefore(masknode,document.getElementById("Box"));
                //document.body.appendChild(masknode);
            }

这里Box就是弹出层，在Box之前插入mask，因为Box是处于模态之后的，
所以它就可以在模态之上，因而可以被点击。
另：jQuery的masknode.appendTo(body)，会将masknode插入到紧邻body之后。













来自为知笔记(Wiz)


附件列表

  • ZC}3()][)VDKS[3BP0LS$~J.jpg

 


联系
我们