jQuery UI dialog box does not appear

Question

I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:

<script type="text/javascript">
    $(document).ready(function() {
        var dialog = $("#dialog");

        dialog.dialog({
            title: "Dialog",
            modal: true,
            draggable: false,
            resizable: false,
            autoOpen: false,
            width: 500,
            height: 400
        });

        dialog.hide();
    });

    function showDialog() {
        $("#dialog").dialog("open");
    }


    $("ui-widget-overlay").click(function() {
        $(".ui-dialog-titlebar-close").trigger("click");
    });
</script>

<div id="dialog">
    Dialog text.
</div>

<button onclick="showDialog()">Show Dialog</button>

When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:

1. The body of the dialog does not show (all that shows is the title bar)
2. When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.

I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?

Solution 1

I believe the problem you're having is from this line:

dialog.hide();

What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.

<div id="dialog"></div>

function showDialog()
{
    $("#dialog").html("Dialog Text.");
    $("#dialog").dialog("open");
}

As for handling the close part, have you tried nesting everything in the main page in a <div> of its own and then handling that click event?

<div id="mainPageDiv">
</div>

$("#mainPageDiv").click(function(){
    $("#dialog").dialog("close");
});

Solution 2

Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).ready for this.

function showDialog() {
    var dialog = $("#dialog");

    dialog.dialog({
        title: "Dialog",
        modal: true,
        open: function () { 
            $('.ui-widget-overlay').bind('click', function () {
                dialog.dialog('close'); 
            });
        }
    });
}

Demonstration

Comments

[Nate]

Great, that fixed 3/4ths of the problem! The dialog now displays correctly, but clicking outside it still doesn't close it.

[AJ.]

What do you mean by "clicking outside of it?" Are you trying to handle a a click event from anywhere OTHER than the div to close it? Why not just put a close button in the dialog or use the default "X" in the title bar?

[Nate]

Yes, what you said at first. Most people intuitively click outside a popup to close it these days as most websites allow it (it's much faster than navigating to the "x" and clicking it). So by "clicking outside of it" I mean anywhere except the dialog.

[AJ.]

Well, I suppose you could nest everything in the main page in a <div> of it's own and then handle the click event of that.

[Mathletics]

I'm fairly sure jQuery Dialog automatically hides the dialog div, with or without content, so no need to hide it manually OR load late. As for the click outside, just bind a click handler to the ui-widget-overlay as it covers the document behind the modal.

[Nate]

@AJ - jQuery apparently adds the following code to the page when a dialog is opened: <div class="ui-widget-overlay" style="width: 1903px; height: 796px; z-index: 1001;"></div>.

[Nate]

@Mathletics - I tried the code from this post: stackoverflow.com/a/11804931/1101095, but it doesn't seem to work on my page for whatever reason (i.e copying and pasting results in the dialog being shown, but it doesn't close when I click outside it, although it does on the jsfiddle page).

[Mathletics]

Set it up in a fiddle and let's try it out.

[Nate]

@Mathletics - Never mind, I it's working now! I viewed the source of the jsfiddle page and they were using a different version of the jQuery libraries. I copied their links and now it works! Thanks!

[jbabey]

There's no reason to handle all of this showing and hiding, nor is there any reason to have any code in a $(document).ready, see my answer for a much simpler solution.

[AJ.]

This would appear to be the best solution, although I don't understand how you can do this without a ready call (because I'm not smart enough yet). Also, depending on the version of jQuery, hasn't bind been deprecated in favor of on?

[jbabey]

yes, bind just calls on in 1.7+, as does delegate. You don't need any code in a ready handler because the dialog can be constructed dynamically when being opened.