如何使用 jquery ui 1.8.17 制作 JQuery ui 对话框，模态答案

【问题标题】：How to make J-Query ui dialog, modal using jquery ui 1.8.17如何使用 jquery ui 1.8.17 制作 JQuery ui 对话框，模态
【发布时间】：2013-07-13 18:33:14
【问题描述】：

我的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.17.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('<div id="dialogDiv">' + 'This is a dialog.' + '</div>').appendTo('body');
            $('#dialogDiv').dialog({
                resizable: false,
                height: 140,
                modal: true,
                autoOpen: false,
            });
            $('#btnLoad').click(function () {
                $('#dialogDiv').dialog('open');
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnLoad" Text="Load" runat="server" />
        </div>
    </form>
</body>
</html>

我希望我的对话框是模态的，这样在我的对话框关闭之前我不能再次单击“加载”按钮。但是使用我上面的代码，我仍然可以单击“加载”按钮。

我正在使用 JQuery ui 1.8.17。谁能告诉我哪里出错了？即使我的内容只是一个句子，也会出现滚动条。如何只隐藏水平滚动条？

【问题讨论】：

标签： jquery asp.net jquery-ui dialog

【解决方案1】：

对于它的价值，我刚刚用 jQuery 1.8.3 和 jQuery UI 1.9.2 测试了你的代码，它运行良好。也许这在旧版本中无法正常工作？

【讨论】：

旧版本有什么解决方案？另外，您在哪个浏览器中检查了此代码？
我签入了 Chrome。至于旧版本的解决方案，老实说，我不确定。您不能使用较新版本是否有特定原因？
是的...资源在集中式服务器中，由于它正在其他项目中使用，我不能要求更改版本。我也在 chrome 和 IE 10 的 28.0.1500.71 版本中尝试过，但它没有工作......虽然它在 FireFox v22 中工作。是否有任何特定原因无法在 IE 中运行。我需要按照 IE 标准开发代码。你能帮帮我吗？\
如果我将“code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css”添加为 css，我的目的就达到了。你能告诉我我在这个文件中寻找哪些样式代码吗？

【解决方案2】：

在阅读了 J-Query-UI 的文档后找到了解决方案。解决方案是我们需要根据需要修改下面的类：

.ui-widget-overlay {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background: #aaaaaa ;/*important line to know that the class is in effect*/
            opacity: .3;
            filter: Alpha(Opacity=30) /*{opacityOverlay}*/;
        }

【讨论】：