jquery ui对话框只打开一次

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden

我有一个按钮，点击时打开一个对话框。对话框显示隐藏的div

After I close the dialog by clicking the X icon, the dialog can't be opened again.

单击X图标关闭对话框后，该对话框将无法再次打开。

3 个解决方案

#1

Scott Gonzalez (of the jQuery UI Team) talks about the reason alot of people have this problem when getting started with jQuery UI in a recent blog post: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Scott Gonzalez (jQuery UI团队)谈到了在最近的一篇博客文章中开始使用jQuery UI时，很多人都有这样的问题:http://blog.nemikor.com/2009/04/08/basic- UI -dialog/。

An excerpt:

摘录:

The problem that users often encounter with dialogs is that they try to instantiate a new dialog every time the user performs some action (generally clicking a link or a button). This is an understandable mistake because at first glance it seems like calling .dialog() on an element is what causes the dialog to open. In reality what is happening is that a new dialog instance is being created and then that instance is being opened immediately after instantiation. The reason that the dialog opens is because dialogs have an autoOpen option, which defaults to true. So when a user calls .dialog() on an element twice, the second call is ignored because the dialog has already been instantiated on that element.

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

Solution:

解决方案:

The simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog('open') in the event handler.

这个问题的简单解决方案是用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');
    });
});

#2

Are you using the ui dialog? You should post some code so we can see what is causing your problem. But here iss a guess (because I made this same mistake recently). When using ui dialog you have to initialize the dialog only once.

你在使用ui对话框吗?你应该发布一些代码，这样我们就能知道是什么导致了你的问题。但这里有一个猜想(因为我最近犯了同样的错误)。在使用ui对话框时，必须只初始化对话框一次。

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

});

This code, initializes the dialog but does not show it. The openDialog function will then open the dialog box when MyButton is clicked.

此代码初始化对话框，但不显示它。然后，当单击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');

};

#3

As an addition to the accepted answer i would like to add that you need to pay attention when using this in an asp.net updatepanel. If you click the button then a postback will happen, the popup will open but won't open a second time because of the postback that happened. So you should make sure that the button you use to open the popup does not postback. ie:

作为已接受的答案的补充，我想补充一点，当在asp.net updatepanel中使用这个选项时，您需要注意。如果单击该按钮，就会发生回发，弹出窗口将会打开，但不会因为发生回发而再次打开。因此，您应该确保打开弹出窗口的按钮不会回发。即:

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

#1