JQueryui 对话框在页面中间显示白框答案

【问题标题】：JQueryui dialog showing white box in middle of pageJQueryui 对话框在页面中间显示白框
【发布时间】：2013-04-04 15:23:28
【问题描述】：

当我在 IE 10 和 FireFox 19.0.2 中使用 jquery UI 对话框时，我认为页面中间出现了一个白色矩形，我遇到了一个 css 问题。希望有人能指出原因。下面是我正在使用的页面代码和jquery，是基本代码。

编辑：我发现只有在对话框对象上设置了 modal:true 时才会发生这种情况。

编辑：我解决了这个问题。将在 8 小时内更新答案。 UI CSS 1.10.2 版修复了这个问题。我想我会升级。

如果有人想看http://jsfiddle.net/9dpsA/
，JSFiddle 会对此进行测试要解决此问题，请将 UI CSS 的外部资源更改为 1.10.2 版本而不是 1.10.1。

<!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
   <link href="../css/jquerycss/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
    <script src="../JavaScript/jquery-1.9.1.min.js"></script>
    <script src="../JavaScript/jquery-ui-1.10.1.custom.min.js"></script>
    <script src="../JavaScript/jquery.blockUI.js"></script>
    <title>Site</title>

    <script>

        $(document).ready(function () {
            $('#dialog-confirm').hide();

            $("#btnArchive").click(function () {
                $('#dialog-confirm').dialog({
                    resizable: false,
                    height: "auto",
                    modal: true,
                    buttons: {
                        "Archive": function () {
                            $(this).dialog("close");
                        },
                        Cancel: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });



        });

       </script>
</head>
<body>
    <form id="form1" runat="server">

    <div id="page" style="text-align:center;">

        <div id="header">
            <h2>Site</h2>
            <asp:Button ID="btnMnu" runat="server" Text="Manage Tasks" PostBackUrl="someurl" />
            <input id="btnArchive" type="button" value="Archive Selected" />
            <asp:Button ID="btnDelete" runat="server" Text="Delete Selected" />
        </div>



        <div id="dialog-confirm" title="Archive the Selected Tasks?">
            <p>
                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                <span>Archiving will result in the deletion of the task. Are you sure you want to archive the task(s)?</span>
            </p>
        </div>

        <div id="footer">

        </div>
    </div>
    </form>
</body>
</html>

【问题讨论】：

现场示例会很好。至少有一些截图。
是的，我在工作，无法上传到 photobucket，而且我没有代表添加图片。
添加了一张图片，i48.tinypic.com/pp387.png
UI CSS 版本 1.10.2 修复了这个问题。估计我会升级。如果有人想查看 jsfiddle.net/9dpsA，JSFiddle 会对此进行测试。要解决此问题，请将外部资源更改为 1.10.2 版本而不是 1.10.1。

标签： jquery user-interface dialog confirmation

【解决方案1】：

用这个替换你的 CSS：

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

在这里查看演示

http://jsfiddle.net/9dpsA/1/

【讨论】：

是的，我就是这么做的。感谢您的回复。

【解决方案2】：

UI CSS 1.10.2 版修复了这个问题。我想我会升级。

要解决此问题，请将 UI CSS 的外部资源更改为 1.10.2 版本而不是 1.10.1。

【讨论】：

我暂时停留在 jquery-ui 1.8.6 上。您是否确切知道 1.10.1 和 1.10.2 之间发生了什么变化？我也许可以将等效更改应用于 1.8.6。切换到 1.10 需要运行完整的回归测试套件，这对于一个浏览器的这个小问题来说有点多。
我没有，但也许看一下这会有所帮助。 jqueryui.com/changelog/1.10.2
谢谢，但这没有帮助。我实际上尝试区分 1.10.1 和 1.10.2 CSS，并将其中一些增量应用于 1.8.6 CSS，但没有任何帮助。