使用iframe z索引的模态对话框

Question

在我的页面上，我有一个包含iframe的div。在这个div上有一个按钮，它也可以调用第二个模态。当调用第二个模态时，它出现在第一个模态的iframe下面。如何设置第二个模态的z-index，使其显示在iframe上方。

我正在使用jquery 1.9。

我在z-Index上尝试了一些CSS，但没有运气。看起来只是一个IE问题。

<style type="text/css">
#diag2 { z-Index: 1000  !important }
</style>

<script type="javascript>
    $(function() {
        $('#diag1').dialog({ modal: true, width: 800, height: 600 });

        $('#btncalldiag2').click(function() { 
            $('#diag2').dialog({ modal: true, width: 800, height: 600 });
        });
    }); 
</script>


<div id="diag1">
    <iframe src="..."></iframe>
    <button id="btncalldiag2">Do something</button>
</div>
<div id="diag2">
    <div>information</div>
</div>

Answer 1

对于拥有z-index的元素，它还需要position:absolute，fixed或relative。