Question

jquery dialog并没有出现在所有元素之上。首先，我有预先构建的框架，其中包含很多部分。在其中一个部分中，我编写了单独的jsp页面以显示一些图形并链接该部分中的jsp页面。在按钮上单击该jsp页面，我显示一个对话框。以下是代码段。

<body>
    <div id="container" style="min-width: 320px; height: 370px; margin: 0 auto"></div>
    <div id="hugedialog" title="dialog"></div>
    <script type="text/javascript">
        $(function() {  
            $("#hugedialog").dialog({
                autoOpen : false, 
                modal : true, 
                show : "blind", 
                hide : "blind", 
                width: 900, 
                height: 700
            });
        });

        function popupdlg() {
            $("#hugedialog").dialog("open");
        }
    </script>
</body>

所以，当点击按钮时，我正在调用上面的函数popupdlg。但问题是，如果我独立打开该页面，它会正确弹出。当我将其嵌入预先构建的部分并单击按钮时，弹出窗口仅显示在该部分中，而不是弹出所有元素。我试过下面的东西，但没有运气 1）.ui-dialog { z-index: 1000 !important ;}

2）尝试movetotop但仍然没有工作

一直在尝试所有可能的答案，但无法成功。有人可以帮助解决这个问题，以便对话框显示该页面中所有元素的顶部吗？我想到的一个想法是，我必须将此div绑定到页面中的top元素。那么，我可以通过任何机会获得顶级引用并从当前的jsp页面本身附加对话框div吗？

Answer 1

也许z-index:9999？

你正在使用我正在假设的bootstrap。你也可以在你自己的代码中陷阱包装“open”事件。

Answer 2

您在此处描述的弹出窗口类型与http://getbootstrap.com/javascript/#modals中给出的bootstrap模态非常相似。如果你想要你的弹出窗口，我建议你使用bootstrap模式。如果有任何机会，你不能在弹出窗口加载时使用bootstrap尝试给背景提供某种叠加效果，这样弹出窗口就可以在其他元素的顶部显示出来。弹出窗口加载会使背景变暗或降低不透明度。希望这会有所帮助。

jquery对话框没有弹出所有元素

2 个答案: