Question

我想要这个：

http://jqueryui.com/demos/dialog/#modal-message

单击ClickMe时发生

。

怎么做？

<script type="text/javascript">
$(document).ready(function() {
$('div.thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
}
    </script>
</head>
<body>
<div id="thedialog" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>
<a href="#" id="thelink">Clickme</a>

没有任何事情发生

Answer 1

而不是div.thedialog，请div#thedialog。 .与类名一起使用，当您使用ID时使用#。

（另外，如果这是您使用的实际代码，则缺少括号:)）

工作代码：

<!doctype html>
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function() {
$('div#thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div#thedialog').dialog('open'); });
})
    </script>
</head>
<body>
<div id="thedialog" title="Download complete">
    <p>
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>
<a href="#" id="thelink">Clickme</a>
</body>

Answer 2

使用$(document).ready(...)对话框，$('div.thedialog').dialog({ autoOpen: false })执行：

$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });

创建对话框和

{{1}}

打开它。

Answer 3

@Azzyh我认为@Rune意味着你必须为它创建一个脚本。

你把它放入你的HTML标签

<script src="script.js" type="text/javascript"></script>

（你也必须将JQuery-ui脚本和JQuery脚本链接到你的页面上面，如上所示（ex） <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>）＆lt; - 在女巫的情况下，他加载了互联网的脚本。）

其中script.js是脚本文件（与html文件位于同一文件夹中）。

现在，在script.js中编写

$(document).ready(function(){
   $('div.thedialog').dialog({ autoOpen: false })
   $('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
});

PS：如果你想学习如何做你在互联网上看到的那些很酷的东西，请阅读this book。

jquery模态对话框onclick？

3 个答案: