注意:不是鏈接到另一個頁面,而是彈出一個頁面,當前的頁面和彈出頁面都存在於瀏覽器的同一個標簽頁中,效果如圖:
彈出的窗體置於四大天王頁面之上,但是無法繼續操作底層的頁面,代碼如下:
1 function createDialog(src, width, height) { 2 var _doc_width = $(document).width(); 3 var _doc_height = $(document).height(); 4 var _html = "<div id='bg' style='position: absolute; z-index: 10000; display: block; left: 0px; top: 0px; opacity: 0.5; height: " + _doc_width + "px; width: " + _doc_width + "px; background-color:#CCC;'></div>"; 5 _html += "<div id='ifdiv'style='z-index:10001;background-color:#FFF;border:solid 10px #cef;position: fixed; left:128px; top:32px;'>"; 6 _html += "<iframe src='" + src + "' frameborder='0' style='width:" + width + "px;height:" + height + "px;overflow:visible;'></iframe></div>"; 7 $('body').append(_html); 8 }
關鍵代碼講解:
-
div id='bg' style='position: absolute; z-index: 10000;bg的z-index為10000,而底層頁面的index默認為0,so,底層的頁面得不到操作。且注意position為absolute。