注意：不是链接到另一个页面，而是弹出一个页面，当前的页面和弹出页面都存在于浏览器的同一个标签页中，效果如图：
弹出的窗体置于四大天王页面之上，但是无法继续操作底层的页面，代码如下：
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; " + _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 + "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。