Question

我试图创建一个覆盖整个网页的jQuery模式对话框。它在某些网站上运行正常但在其他网站上运行正常我遇到的问题是对话框位于网页内容like the google search bar and button下方，而模式叠加层未涵盖整个页面。 Here both the dialog box and overlay are covered by the upper Google banner

这是我的代码。我使用对话框就像镀铬扩展中的警报一样，所以一切都必须在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.我知道它是同一个问题，因为我并没有真正对对话做任何不同的事情，但我无法弄清楚如何将两者结合起来。< / p>

Answer 1

我过去在z-indexing的问题上没有任何问题，因为这些问题非常深入。我觉得最好在网站上做一个质量z-index，这样我就可以根据需要定义图层级别。如果您首先将站点设置为平放在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;
}

如何在整个页面上叠加jQuery UI对话框？

1 个答案: