open jquery modal dialog on page load

问题

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

<div id="example" class="flora" title="This is my title">
    I'm in a dialog!
</div>

Thanks

回答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>
<script type="text/javascript" language="javascript"
        src="jquery/jquery.js"></script>
<script type="text/javascript" language="javascript"
        src="jquery/jquery.ui.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $("#example").dialog({modal: true});
    });
</script>
</head>
<body>
    <div id="example" class="flora" title="This is my title">
        I'm in a dialog!
    </div>
</body>
</html>

回答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:

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

For your reference:

The jQuery Dialog Documentation (see the bottom for a styling reference)
A Modal Dialog example
My small MIT licensed project, which has a modal dialog: inComeAgain?

来源：https://stackoverflow.com/questions/522864/open-jquery-modal-dialog-on-page-load

标签

javascript

jquery

jquery-ui