使用 JQuery 显示简单的模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15896298/
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
Show simple modal dialog using JQuery
提问by user2218845
There is the simple following div:
有以下简单的div：
<div id="dialogg">
Hello, world!
</div>
Some CSS style:
一些 CSS 样式：
#dialogg {
display: none;
}
And JQuery code:
和 JQuery 代码：
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dialogg').dialog({
autoOpen: false;
width: 400;
});
$('#dialogg').dialog('open');
});
</script>
But I see no dialogs! How can I fix it? What's wrong?
但是我看不到对话框！我该如何解决？怎么了？
UPDATE:
更新：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Исторический турнир</title>
<link rel="stylesheet" type="text/css" href="assets/css/main-styles.css">
<link rel="stylesheet" type="text/css" href="assets/css/departments-page-styles.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dialogg').show();
$('#dialogg').dialog({
autoOpen: false;
width: 400;
});
$('#dialogg').dialog('open');
});
</script>
</head>
But this code doesn't still work.
但是这段代码仍然不起作用。
回答by Ashwini Verma
please try this:
请试试这个：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
and just try: $("#dialogg").dialog();
并尝试： $("#dialogg").dialog();
<script>
$(function() {
$( "#dialogg").dialog();
});
</script>
see DEMO
看演示
回答by bipen
you don't need two ui.js script there remove one.. and looks like you forgot to load the css file
你不需要两个 ui.js 脚本，删除一个 .. 看起来你忘记加载 css 文件
add this on top of the script..
将此添加到脚本之上..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
so the full code should be
所以完整的代码应该是
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#dialogg').dialog({
autoOpen: false;
width: 400;
});
$('#dialogg').dialog('open');
});
</script>
回答by cosmin.danisor
You're not waiting for the html document to be fully loaded completely as far as the browser is concerned when you are selecting $('#dialog')it does not exist. You can either use the <script>...</script>lower in the html or add the function in $('document').ready(function(){..});
就浏览器而言，当您选择$('#dialog')它不存在时，您不会等待 html 文档完全加载。您可以使用<script>...</script>html 中的下层或在$('document').ready(function(){..});
回答by user2912019
Also this is incorrect:
这也是不正确的：
$('#dialogg').dialog({
autoOpen: false;
width: 400;
});
it should be:
它应该是：
$('#dialogg').dialog({
autoOpen: false,
width: 400
});
