JQuery UI диалог открывается только один раз

Question

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

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

Answer 1

Скотт Гонсалес (из команды jQuery UI Team) рассказывает о причине, по которой многие люди сталкиваются с этой проблемой при начале работы с пользовательским интерфейсом 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');
    });
});

Answer 2

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

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

};

Answer 3

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

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