在页面加载时打开jquery模式对话框

I have a page, i want it to disploay display it content in a modal dialog (jquery UI dialog) as soon as the page is loaded.

我有一个页面，我想让它在加载页面后立即在模式对话框（jquery UI对话框）中显示它的内容。

  $(document).ready(function(){
    $("#example").dialog();
  });

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

Thanks

谢谢

2 个解决方案

#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.

您的div标签格式不正确，需要关闭。以下为我工作，但它需要适当的CSS文件。

<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

Wayne Khan是对的

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

除非将autoOpen设置为false，否则默认行为是在调用dialog（）时打开。

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

虽然默认对话框不是Modal，但tvanfosson几乎是正确的。要显示模态窗口，必须将模态选项设置为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)
jQuery对话文档（参见底部的样式参考）
A Modal Dialog example
模态对话框示例
My small MIT licensed project, which has a modal dialog: inComeAgain?
我的小MIT许可项目，它有一个模态对话框：inComeAgain？

#1