javascript - 如何在整个页面上覆盖 jQuery UI 对话框？

Question

我正在尝试制作一个覆盖整个网页的 jQuery 模式对话框。它在某些网站上运行良好，但在其他网站上则不然。我遇到的问题是该对话框位于网页内容下方，like the google search bar and button ，并且模式叠加不会覆盖整个页面。 Here both the dialog box and overlay are covered by the upper Google banner

这是我的代码。我使用的对话框就像 Chrome 扩展中的警报一样，因此所有内容都必须位于 background.js 执行的内容脚本中。

if (someEvent) {

   var NewDialog = $('<div id="MenuDialog"><p>This is dialog content.</p></div>');
   NewDialog.dialog({
    autoOpen: false,
    modal: true,
    title: "title",
    zIndex: 99999,
    buttons: [
    {text: "Submit", click: function() {doSomething()}},
    {text: "Cancel", click: function() {$(this).dialog("close")}}
    ]
   })
   NewDialog.dialog("open");
   });
}

我已经寻找了所有解决方案，包括更改 z 索引，但似乎没有任何效果。最好的方法是什么？

更新

我正在尝试 Veritoanimus 建议的 iframe 方法，但我仍然陷入困境。我发现代码可以在整个页面上创建 iframe，因此它的工作方式类似于模式。但是如何将对话框添加到 iframe 中呢？

代码:

wrapperDiv = document.createElement("div");
wrapperDiv.setAttribute("style","position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;");
iframeElement = document.createElement("iframe");
iframeElement.setAttribute("style","width: 100%; height: 100%;");
wrapperDiv.appendChild(iframeElement);
document.body.appendChild(wrapperDiv);

var newDiv = $(document.createElement('div')); 
newDiv.html('hello there');
newDiv.dialog({
  title: "title",
    zIndex: 99999,
    buttons: [
    {text: "Submit", click: function() {doSomething()}},
    {text: "Cancel", click: function() {$(this).dialog("close")}}
    ]
  })

This is what it looks like.我知道这是同一个问题，因为我并没有对对话框做任何不同的事情，但我不知道如何将两者结合起来。

Answer 1

过去，我在深入的网站上工作时，遇到过无数的 z 索引问题。我发现最好在网站上做一个质量 z 索引，以便我可以根据需要定义图层级别。如果您首先将站点设置为平放在 z 索引上，则可以避免以后的麻烦，并让您使用更合理的数字进行索引，因为您最终会显式定义每个 z 层。我最终以 1 作为基础层，工具提示在 2 上，菜单在 3 上，然后对话框的模态后挡板在 4 上，对话框在 5 上，模态阻止后挡板(用于页面加载)在 6 上，状态窗口在 7 上。

span, div, label, a, table, tbody, tr, td, th, thead, tfoot, 
    input, textarea, select, ul, li, ol, p, h1, h2, h3, h4, h5, h6, 
    iframe, hr, b, i, img, object, body  {

    z-index: 1;
}