我使用
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.要打开对话框,您应该使用对话框(‘打开’).
例如：
$(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’).这样效率更高,因为否则,jQuery必须在一段代码中多次查找#dialog.
其次,你的HTML中有一个错误：这里有一个引用太多了：
<div class="demo" ">
这可能会在某些浏览器中导致意外行为(但不是全部),这使得调试变得困难.删除额外的报价.
第三,如果我没记错的话,jQuery UI Dialog已经处理了ESC键,所以你不必自己动手.如果您想在按下exscape时关闭对话框以外的其他操作,您应该使用对话框的beforeClose事件.如果您只想关闭对话框;你已经准备好了.
