jQuery UI对话框只能打开一次

Question

我有一个按钮，当点击它时会打开一个对话框。

该对话框显示一个之前隐藏的div元素。

但是，当我通过点击“X”图标关闭对话框后，再次点击按钮无法重新打开对话框。

- flybywire

---

邮政编码或链接... :-( - beggs

你使用什么代码来隐藏和显示对话框？ - Bryan McLemore

一些代码会很棒。通常，在关闭时/同时确保不会引起任何错误。 - helloandre

Answer 1

Scott Gonzalez（jQuery UI团队成员）在最近的博客文章中谈到了很多人在开始使用jQuery UI时遇到的问题的原因: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

摘录:

用户经常遇到的问题是，他们尝试在每次用户执行某些操作（通常是单击链接或按钮）时实例化一个新的对话框。这是一个可以理解的错误，因为乍一看似乎在元素上调用.dialog()会导致对话框打开。实际上正在发生的是创建了一个新的对话框实例，然后立即打开该实例。对话框打开的原因是因为对话框具有autoOpen选项，默认为true。因此，当用户两次在元素上调用.dialog()时，第二次调用将被忽略，因为对话框已经在该元素上实例化。

解决方案:

解决这个问题的简单方法是将autoOpen设置为false来实例化对话框，然后在事件处理程序中调用.dialog('open')。

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
    });
});

- Alex Sexton

---

如果在事件中初始化并显示对话框，会发生什么？这会带来性能风险还是只是不良实践？ - Guillaume Renoult

不起作用，可能只是这个对话框设计得不好？ - jpganz18

Answer 2

您正在使用ui对话框吗？您应该发布一些代码，以便我们可以看到是什么导致了您的问题。但这里有一个猜测（因为我最近也犯了同样的错误）。使用ui对话框时，您只需初始化对话框一次。

 $(document).ready(function() {
   $('#dialog').dialog({
     autoOpen:false,
     modal:'true',
     width:450,
     height:550
  });
 $('#MyButton').click(openDialog);    

});

这段代码是初始化对话框但并不显示它。当点击MyButton时，openDialog函数将打开对话框。

   var openDialog = function(){

       $('#dialog').load('loadurl.php');//load with AJAX

      //optionally change options each time it is clicked
       $('#dialog').dialog('option', 'buttons',{
          "Cancel":function(){
             $('#dialog').dialog('close');
          }
      });

     //actually open the dialog
     $('#dialog').dialog('open');

};

- Vincent Ramdhanie

Answer 3

作为对已接受答案的补充，我想添加一点内容：在使用此方法时，您需要注意在 asp.net updatepanel 中的使用方式。如果单击按钮，则会发生 postback，弹出窗口将打开但因为发生了 postback 而无法再次打开。因此，您应该确保用于打开弹出窗口的按钮不会发生 postback。例如：

<asp:LinkButton ID="btn1" runat="server" OnClientClick="return false;">Click me</asp:LinkButton>

- user2315697