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中的其他元素位于下方，则不幸的是不可能。

Answer 2

我发现了自己的错误，

我希望这可以帮助别人，

我有这段代码在iframe内部将.ui-widget-content一层下来。

if($frame=='iframe'){
    echo'<style>
    .ui-widget-content{
    z-index:-1 !important;
...

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

2 个答案: