Question

我的代码如下：

<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。谁能告诉我哪里出错了？即使我的内容只是一个句子，也会出现滚动条。如何只隐藏水平滚动条？

Answer 1

对于它的价值，我只是用jQuery 1.8.3和jQuery UI 1.9.2测试了你的代码，它运行得很好。也许这对于旧版本来说并不合适？

Answer 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}*/;
        }

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

2 个答案: