製作一個有模態的彈出層

標籤：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