JQueryui dialog showing white box in middle of page

StackOverflow https://stackoverflow.com/questions/15815358

Question

I am having an css issue I believe with a white rectangle appearing in the middle of the page when I use the jquery UI dialog box in both IE 10 and FireFox 19.0.2. Was hoping someone could point out why. Below is the page code and jquery I am using, it is basic code.

EDIT: I have found it only happens when modal:true is set on the dialog object due to the overlay.

EDIT: I fixed this issue. Will update answer in 8hours. Version 1.10.2 of UI CSS Fixes this problem. Guess I will upgrade.

JSFiddle to test this if anyone wants to see http://jsfiddle.net/9dpsA/
To fix the issue, change the external resource of UI CSS to 1.10.2 version in stead of 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>
Was it helpful?

Solution 2

Version 1.10.2 of UI CSS Fixes this problem. Guess I will upgrade.

To fix the issue, change the external resource of UI CSS to 1.10.2 version in stead of 1.10.1.

OTHER TIPS

Replace your CSS with this one:

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

SEE DEMO HERE

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top