8

I am trying to create a modal dialog to just show content (html of some sort or other):

<script>
$.fx.speeds._default = 1000;
$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        closeOnEscape: true,
        modal: true,
        position: 'center',
        width: 800,
        height: 600,
        show: "blind",
        hide: "explode"
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });

});
</script>

When I view the page, the dialog is inline and not hidden. Here is my html:

<div id="dialog">This is my dialog that should be hidden until called</div>
<button id="opener">I Open the Dialog</button>

What am I doing wrong?

SteeleHudson
  • 81
  • 1
  • 1
  • 3
  • 1
    Are you including jQueryUI.js in the right order? It seems like it isn't working at all so maybe you don't have access to jQueryUI. – orolo Sep 27 '11 at 18:44

2 Answers2

11

Hide the div using css like such:

<div id="dialog" style="display:none;">This is my dialog that should be hidden until called</div>

Now it will only show when called upon.

Brett
  • 111
  • 2
  • 5
8

You should set the autoOpen property to false, below is some reference

http://jqueryui.com/demos/dialog/#option-autoOpen

Here is an example

$(function() {
    $( "#dialog" ).dialog({
        closeOnEscape: true,
        modal: true,
        position: 'top',
        width: 800,
        height: 600,
        show: "blind",
        hide: "explode",
        autoOpen: false  ///added this line
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });

});
John Hartsock
  • 85,422
  • 23
  • 131
  • 146