jQuery UI Dialog第二次没有打开

我正在使用jqueryui作为对话框。 第一次点击“点击模式”链接。 按ESC键时，对话框消失。 但之后的点击不起作用。 我希望那些也能奏效。 刷新页面使一切正常。

HTML：

  Click for a modal
 
 
 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 
 
 

jQuery片段：

    $(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"); } }); });  

如何进行多次点击工作？

Answer 1

四件事。

首先，如果对话框应该是可重用的，那么您需要在第一次单击之前创建它，并将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中有一个错误：这里有一个引用太多了：

这可能会在某些浏览器中导致意外行为（但不是全部），这使得调试变得困难。 删除额外的报价。

第三，如果我没记错的话，jQuery UI Dialog已经处理了ESC键，所以你不必自己动手。 如果要在按下exscape时关闭对话框以外的其他操作，则应该实际使用对话框的beforeClose事件。 如果您只想关闭对话框; 你已经准备好了。 🙂

最后，不使用内联样式是一种很好的做法。 所以不是这样的：

 Click for a modal 

使用以下内容创建CSS文件：

 .click_me { font-size:15px; } 

您可以对#dialog执行相同#dialog ，包括您现在使用JavaScript应用的边框：

 #dialog { border: 5px solid #848484; width:640px; } 

希望这可以帮助。

---

这是一个工作示例，它适用于我提到的四点： http ： //jsfiddle.net/PPvG/yHTJw/

请注意，缺少jQuery UI样式，因此对话框有点难看。 🙂

---

要确保Dialog按预期工作，请确保您使用的是最新版本的jQuery和jQuery UI，并且包含jQuery UI主题。

以下是通过Google CDN加载所有内容的示例：

将它们包含在HTML的中。 结果应该是这样的 。 如果没有，你可以尝试以下几点：

• 看看你的浏览器的JavaScript控制台（每个现代浏览器都有一个;谷歌它）。
• 尝试其他浏览器。
• 尝试以不同的方式加载页面（例如，通过file://对比via localhost ）。
• （极端情况:)尝试不同的计算机和不同的互联网连接。

如果这些都不起作用，我很遗憾地说，但是......“你做错了”。 😛

请注意，上面的代码段将包含名为“base”的默认jQuery UI主题。 如果它不符合您的需求，您可以将Google CDN用于其他一些默认主题（请参阅此博客文章 ），或者您可以使用ThemeRoller创建自己的主题。

---

编辑：

要确保Dialog保持焦点（因此当用户按下ESC时关闭，即使用户单击页面上的其他位置），请尝试将modal设置为true：

  $('#dialog').dialog({ autoOpen: false, modal: true }); 

jsFiddle： http ： //jsfiddle.net/PPvG/yHTJw/3/

通常，用户仍然可以与页面上的其他项目进行交互（因此，这些项目可以从对话框中获取焦点）。 当modal选项设置为true ，用户无法再与页面的其余部分进行迭代，无论如何，Dialog都将保持焦点。

希望这可以帮助。

Answer 2

尝试使用$("#dialog").close(); 而不是$("body").unbind("keyup.myDialog");

Answer 3

  .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”）;