jquery 对话框没有在所有元素上方弹出答案

【问题标题】：jquery dialog is not popping up above all elementsjquery 对话框没有在所有元素上方弹出
【发布时间】：2014-11-24 07:45:33
【问题描述】：

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

<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 绑定到页面中的顶部元素。那么，有没有机会我可以从当前的 jsp 页面本身获得顶部引用并将对话框 div 附加到它？

【问题讨论】：

标签： javascript jquery dialog

【解决方案1】：

也许z-index:9999？

我假设您正在使用引导程序。您也可以尝试在自己的代码中包装“open”事件。

【讨论】：

更改 z-index 不起作用，我什至将其更改为不同的数字，但没有运气。

【解决方案2】：

您在此处描述的弹出窗口类型与http://getbootstrap.com/javascript/#modals 中给出的引导模式非常相似。如果这是您希望弹出窗口的样子，我建议您使用引导模式。如果有任何机会，您无法在弹出加载时使用引导程序，请尝试为背景提供某种叠加效果，以便弹出窗口在其他元素之上以粗体显示。在弹出加载时使背景变暗或降低不透明度。希望这会有所帮助。

【讨论】：

当我将它作为单独的页面执行时，它不仅在我嵌入到预构建的框架时有效，这意味着其他元素隐藏了弹出窗口。