Диалоговое окно jquery ui открывается только один раз

У меня есть кнопка, которая открывает диалог при нажатии. В диалоговом окне отображается div, который был скрыт

После закрытия диалогового окна, щелкнув значок X, диалог не может быть снова открыт.

Ответ 1

Скотт Гонсалес (из команды jQuery UI) рассказывает о причине, по которой многие люди сталкиваются с этой проблемой при запуске с пользовательским интерфейсом jQuery в недавнем сообщении в блоге: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

Выдержка:

Проблема, с которой пользователи часто сталкиваются с диалоговыми окнами заключается в том, что они пытаются создавать новый диалог каждый раз пользователь выполняет какое-либо действие (обычно нажмите ссылку или кнопка). Это понятно ошибка, потому что на первый взгляд это похоже на вызов .dialog() на элемент - это то, что вызывает диалог. открытый. В действительности, что происходит что новый экземпляр диалога и затем этот экземпляр открываются сразу после конкретизации. Причина, по которой открывается диалоговое окно опция autoOpen, по умолчанию правда. Поэтому, когда пользователь вызывает .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');
    });
});

Ответ 2

Используете ли вы диалог ui? Вы должны опубликовать некоторый код, чтобы мы могли видеть, что вызывает вашу проблему. Но здесь есть предположение (потому что я совершил ту же ошибку в последнее время). При использовании диалога ui вы должны инициализировать диалог только один раз.

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

});

Этот код инициализирует диалог, но не показывает его. Функция openDialog откроет диалоговое окно при нажатии кнопки "MyButton".

   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

В качестве дополнения к принятому ответу я хотел бы добавить, что вам нужно обратить внимание при использовании этого в панели обновления asp.net. Если вы нажмете на кнопку, тогда произойдет обратная передача, всплывающее окно откроется, но не откроется во второй раз из-за произошедшей обратной передачи. Таким образом, вы должны убедиться, что кнопка, которую вы используете для открытия всплывающего окна, не возвращается. то есть:

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