javascript - jquery 对话框上的 z-index 在 iframe 中不起作用

Question

我正在使用 bootstrap，它使用 jquery 对话框。如果对话框的 z-index 设置为 1 或更多，则在独立脚本中可以正常工作。但是，当我在 iframe 中调用相同的脚本时。然后对话框显示在同一页面上其他元素的下方。奇怪的是，如果我尝试关闭对话框，我做不到，因为半透明层似乎位于对话框本身之上。

ui-dialog {
    z-index:99999999 !important;
}
.ui-widget-overlay {
    position: fixed;
    z-index:99999999 !important;
}
.ui-dialog {
    z-index:99999999 !important;
}
.fixed-dialog {
    position: fixed;
    top: 50px;
    left: 50px;
    z-index:99999999 !important;
}
.ui-dialog-titlebar {
    border-left: 30px solid transparent;
    min-height:40px;
    background-color:#f09;
    background-image:url(images/yellow_alert_icon.png);
    background-position: -22px 8px;
    background-repeat:no-repeat;
    z-index:99999999 !important;
}

我有很多存货!!!

更新说明: iframe 是空的。它不包含任何其他元素。我只是将它用作对话框。 所以 iframe 中的整个代码都是同一个脚本。因此，父脚本。 隔离的父脚本工作正常。 当我把它放在 iframe 中时，当 jquery 对话框弹出时，它显示在父脚本下面。

Answer 1

iframe 的所有元素都在该 iframe 中隔离。应用的任何 z-index 值都将应用于 iframe 内的其他元素。

iframe 本身可以有一个z-index，但这会影响整个iframe 及其所有内容。如果您希望 iframe 中的一个元素显示在父文档元素的上方，而 iframe 中的其他元素位于下方，很遗憾，这是不可能的。