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?

Answer 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");
});