我的页面上存在以下jQuery对话框:
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>
<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
These items will be permanently deleted and cannot be recovered. Are you sure?
</p>
</div>
在jQuery UI演示页面中,文本没有出现,但在我的网站上显示的是文本。
我什么都没改变。还有其他人经历过这个吗?
例如我看到这个文字:
These items will be permanently deleted and cannot be recovered. Are you sure?
答案 0 :(得分:1)
致电div
时隐藏了.dialog
。调用它在DOM ready事件中传递autoOpen: false
选项,并在想要显示它时调用.dialog('open')
。
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
//your buttons and other defined options
});
当然,请确保您已正确包含jQuery lib,jQuery UI和CSS文件:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
答案 1 :(得分:0)
工作演示 http://jsfiddle.net/Qd5Xe/3/
请注意你遗漏了我认为Jq-UI和Css的脚本来源,请看这里
希望它有助于事业
<强>脚本强>
<link rel="stylesheet" href="http://jqueryui.com/demos//css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
<强>代码强>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});