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

制作一个有模态的弹出层

参考慕课网课程《分享:阿当大话西游之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