jquery 模态对话框 onclick？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2353037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery modal dialog onclick?
提问by Karem
I want this:
我要这个：
http://jqueryui.com/demos/dialog/#modal-message
http://jqueryui.com/demos/dialog/#modal-message
to happend when you click on ClickMe.
单击 ClickMe 时发生。
how to do this?
这该怎么做？
<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>
nothing happends
什么都没发生
回答by madaboutcode
Instead of div.thedialog, give div#thedialog. the .is used with class names and #is used when you are working with ids.
而不是div.thedialog，给div#thedialog。the.与类名一起使用，并#在您使用 id 时使用。
( Also, if this is the actual code you used, there was a missing bracket :) )
（此外，如果这是您使用的实际代码，则缺少括号:)）
The working code:
工作代码：
<!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>
回答by Rune
回答by Kevin
@Azzyh I thing that @Rune means that you have to make a script for it.
@Azzyh 我认为@Rune 意味着你必须为它制作一个脚本。
You put this into the tag of your html
你把它放到你的html标签中
<script src="script.js" type="text/javascript"></script>
(also you have to have the JQuery-ui script and JQuery script too linked to your page with the as sawn above (ex
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>) <- in witch case he load the script of the internet).
（您还必须将 JQuery-ui 脚本和 JQuery 脚本链接到您的页面，如上所示（例如
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js" type="text/javascript"></script>）<- 在巫婆的情况下，他加载了互联网的脚本）。
Where script.js is the script file ( in the same folder as the html file ).
其中 script.js 是脚本文件（与 html 文件在同一文件夹中）。
Now, in the script.js you write
现在，在你编写的 script.js 中
$(document).ready(function(){
$('div.thedialog').dialog({ autoOpen: false })
$('#thelink').click(function(){ $('div.thedialog').dialog('open'); });
});
PS: Read this bookif you like to learn how to do All that cool stuff you see on the internet.
PS：如果你想学习如何做你在互联网上看到的所有很酷的东西，请阅读这本书。
