jQuery UI Dialog第二次没有打开
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery UI Dialog第二次没有打开相关的知识，希望对你有一定的参考价值。
我使用jqueryui作为对话框。第一次点击“点击模态”链接有效。按ESC键时，对话框消失。但之后的点击不起作用。我希望那些也能奏效。刷新页面使一切正常。
html：
<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />
<div class="demo" ">
<div id="dialog" title=" Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">
this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is
</div><!-- end of id dialog -->
</div><!-- End demo -->
jQuery片段：
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".click_me").bind('click', function (e) {
e.preventDefault();
$("#dialog").css('border', '5px solid #848484');
$("#dialog").dialog({
width: 460
});
//$( "#dialog" ).dialog( "option", "height", 180 );
});
$("body").bind("keyup#dialog", function (event) {
// 27 == "esc"
if (event.which == 27) {
// TODO: close the dialog
// unbind the event
$("body").unbind("keyup.myDialog");
}
});
});
</script>
如何进行多次点击工作？
四件事。
首先，如果对话框应该是可重用的，那么您需要在第一次单击之前创建它，并将autoOpen选项设置为false。要打开对话框，您应该使用dialog('open')。
例如：
$(document).ready(function () {
var dialog = $('#dialog');
dialog.dialog({ // <-- create the dialog
width: 460,
autoOpen: false
});
$(".click_me").bind('click', function (e) {
e.preventDefault();
dialog.dialog('open'); // <-- open the dialog
});
});
请注意，我创建了一个var dialog来保存$('#dialog')。这样更有效，因为否则，jQuery必须在一段代码中多次查找#dialog。
其次，你的HTML中有一个错误：这里有一个引用太多了：
<div class="demo" ">
这可能会在某些浏览器中导致意外行为（但不是全部），这使得调试变得困难。删除额外的报价。
第三，如果我没记错的话，jQuery UI Dialog已经处理了ESC密钥，所以你不必自己动手。如果你想在按下exscape时关闭对话框以外做其他事情，你应该使用对话框的beforeClose事件。如果您只想关闭对话框;你已经准备好了。 :-)
最后，不使用内联样式是一种很好的做法。所以不是这样的：
<a href="" class="click_me" style="font-size:15px;">Click for a modal</a>
使用以下内容创建CSS文件：
.click_me {
font-size:15px;
}
您可以对#dialog执行相同的操作，包括您现在使用JavaScript应用的边框：
#dialog {
border: 5px solid #848484;
width:640px;
}
希望这可以帮助。
这是一个工作示例，它适用于我提到的四点：http://jsfiddle.net/PPvG/yHTJw/
请注意，缺少jQuery UI样式，因此对话框有点难看。 :-)
要确保Dialog按预期工作，请确保您使用的是最新版本的jQuery和jQuery UI，并且包含了jQuery UI主题。
这是一个通过Google CDN加载所有内容的示例：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
将这些包含在HTML的<head>中。结果应该看起来like this。如果没有，你可以尝试以下几点：
- 看看你的浏览器的JavaScript控制台（每个现代浏览器都有一个;谷歌它）。
- 尝试使用其他浏览器。
- 尝试一种不同的加载页面的方式（例如通过
file://与vialocalhost）。 - （极端情况:)尝试不同的计算机和不同的互联网连接。
如果没有这些工作，我很遗憾地说，但是......“你做错了”。 :-P
请注意，上面的代码段将包含名为“base”的默认jQuery UI主题。如果它不符合您的需求，您可以将Google CDN用于其他一些默认主题（请参阅this blog post），或者您可以使用ThemeRoller创建自己的主题。
编辑：
要确保Dialog保持焦点（因此当用户按下ESC时关闭，即使用户单击页面上的其他位置），请尝试将modal设置为true：
$('#dialog').dialog({
autoOpen: false,
modal: true
});
的jsfiddle：http://jsfiddle.net/PPvG/yHTJw/3/
通常，用户仍然可以与页面上的其他项目进行交互（因此，这些项目可以从对话框中获取焦点）。当modal选项设置为true时，用户无法再与页面的其余部分进行迭代，无论如何，Dialog都将保持焦点。
希望这可以帮助。
尝试使用$("#dialog").close();而不是$("body").unbind("keyup.myDialog");
.dialog({
title: "Confirmation",
modal: true, zIndex: 10000, autoOpen: true,
resizable: false,
width: 1000,
height: 530,
maxHeight: 1000,
minHeight: 200,
closeOnEscape: false,
buttons: {
Yes: function () {
CLOSEDDPROJECT.confirmCancelRequest();
$(this).dialog("close");
},
No: function () {
$(this).dialog("destroy");
$('.propagateRA').prop('checked', false);
}
},
close: function () {
$(this).remove();
}
});
尝试使用$（this）.dialog（“destroy”）;而不是$（this）.dialog（“close”）;
以上是关于jQuery UI Dialog第二次没有打开的主要内容，如果未能解决你的问题，请参考以下文章
UG二次开发中MFC对话框怎样调用UF_UI_select_with_class_dialog