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 es 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?

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 es 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?

• javascript
• jquery
• jquery-ui
• jquery-ui-dialog

• @FritsvanCampen - You mean that dialog.dialog() with the settings is not being called? I think it is, because the width setting affects the width of the title bar. – Nate Commented Dec 21, 2012 at 17:55
• 1 @Nate-though I appreciate being awarded the answer, and I believe that I DID answer your original question correctly (with the hide() issue), there are better answers below that may be more deserving. – AJ. Commented Dec 21, 2012 at 18:53

4 Answers 4

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

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

I see your:

$("ui-widget-overlay").click(

perhaps should select a class:

$(".ui-widget-overlay").click(

which does not happen as it does not exist, so you need to hook it to the document.

and the dialog.hide(); is not needed as it hides it automatically when it bees a dialog

SO you should have:

  $(document).on('click',".ui-widget-overlay", function() {
        $(".ui-dialog-titlebar-close").trigger("click");
  });

more simply:(if you have no other dialogs you need to deal with this way)

$(document).on('click',".ui-widget-overlay", function() {
   $("#dialog").dialog("close");
});

sample fiddle to show full reworked code: http://jsfiddle/GrFE3/2/

I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...

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

<button id="showDialog">Show Dialog</button>

and the code for that markup:

$(document).ready(function() {
    var dialog = $("#dialog");
    dialog.dialog({
        title: "Dialog",
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: false,
        width: 500,
        height: 400
    });
    $('#showDialog').click(function() {
        dialog.dialog("open");
    });
    $(document).on('click', ".ui-widget-overlay", function() {
        dialog.dialog("close");
    });
});