Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Jquery Ui

Open Jquery Modal Dialog On Page Load

Post a Comment
I have a page, i want it to display some content in a modal dialog (jquery UI dialog) as soon as the page is loaded. $(document).ready(function(){ $('#example').dialog(); }

Solution 1:

Your div tag isn't properly formatted and it needs to be closed. The following worked for me, but it needs proper CSS files.

<html><head><scripttype="text/javascript"language="javascript"src="jquery/jquery.js"></script><scripttype="text/javascript"language="javascript"src="jquery/jquery.ui.js"></script><scripttype="text/javascript"language="javascript">
    $(document).ready(function(){
        $("#example").dialog({modal: true});
    });
</script></head><body><divid="example"class="flora"title="This is my title">
        I'm in a dialog!
    </div></body></html>

Solution 2:

Wayne Khan is right in that

the default behavior is to open when you call dialog(), unless you set autoOpen to false.

and tvanfosson has it nearly correct, though the default dialog is not Modal. To display a modal window, you must set the modal option to true

To illustrate, here's a trimmed-down excerpt from a small project I was working on tonight:

...
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script><scripttype="text/javascript"src="./jquery-ui-personalized-1.6rc6.min.js"></script><scripttype="text/javascript"src="./init.js"></script><linkhref="./css.css"type="text/css" /><scripttype="text/javascript">
    $(function() {
        $('#exampleNode').dialog({
            modal: 'true'
        });
    });
</script>
...

For your reference:

Post a Comment for "Open Jquery Modal Dialog On Page Load"