制作一个有模态的弹出层

时间：2014-07-21 23:30:40 阅读：319 评论：0 收藏：0 [点我收藏+]

标签：style blog http color os width

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

定制不同的皮肤可通过对元素添加或减少class类来实现。

首先，模态是指如下图部分的灰色背景部分：（灰色部分不可点击）

然后，要记住，模态要加在当前页面的上面，以及当前操作框（通常是一个弹出层）的下面

所谓上面，下面是指：

如果模态（通常是一个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

制作一个有模态的弹出层,布布扣,bubuko.com

制作一个有模态的弹出层

标签：style blog http color os width

原文地址：http://www.cnblogs.com/iceseal/p/3858847.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行