Как бы я сослался на динамически создаваемое диалоговое окно jQuery, чтобы я мог закрыть его программно? - PullRequest
Новая
       10

Как бы я сослался на динамически создаваемое диалоговое окно jQuery, чтобы я мог закрыть его программно?

0 голосов
/ 03 мая 2011

Когда я начал использовать jQuery чуть более года назад, мне нужно было загрузить удаленный контент во всплывающее диалоговое окно.После изучения Интернета и опробования нескольких предложенных методов для этого я наткнулся на функцию, которая работала именно так, как мне было нужно.Однако одна проблема, которую я никогда не решал, заключается в том, как ссылаться на динамическое диалоговое окно, чтобы его можно было закрыть из внешней функции.

Вот функция, которая создает диалоговое окно, добавляет его в тело, а затемзагружает в него страницу: 

function openDynamicDialog() {
  var url = 'mypage.cfm';
  var dialog = $('`<div style="display:hidden"></div>`').appendTo('body');
    $(dialog).dialog({
      autoOpen: true,
      title: 'My Title',
      resizable: true,
      modal: true,
      width: 250,
      height: 100,
      close: function(ev, ui) {
             $(this).remove(); // ensures any form variables are reset.
           }, 
      buttons: {
        "Close": function(){ 
          $(this).dialog("close");
        }
      }
  });
  // load remote content
  dialog.load(
    url,
    {},
    function (responseText, textStatus, XMLHttpRequest) {
      dialog.dialog();
     }
  );
  //prevent the browser from following the link
  return false; };

Я рассмотрел вопрос о том, чтобы придать этому скрытому div жестко закодированное значение id, но я не уверен, есть ли недостатки в этом подходе.

Любые предложения будут наиболее признательны.

Ответы [ 3 ]

0 голосов
/ 03 мая 2011

Нет, не должно быть никаких недостатков, дающих ему идентификатор.Если вы боитесь каких-либо конфликтов, вы можете вместо этого дать ему класс или сохранить ссылку на объект div в глобальной переменной.

0 голосов
/ 03 мая 2011

Я бы использовал жестко запрограммированное значение идентификатора для элемента <div>.

0 голосов
/ 03 мая 2011

Ну, я не уверен, что return false в конце. так что если вам это не нужно, сделайте следующее: 

function openDynamicDialog() {
    var url = 'mypage.cfm';
    var dialog = $('<div>').css('display','none').appendTo('body');
    $(dialog).dialog({
        autoOpen: true,
        title: 'My Title',
        resizable: true,
        modal: true,
        width: 250,
        height: 100,
        close: function(ev, ui) {
            $(this).remove(); // ensures any form variables are reset.
        },
        buttons: {
            "Close": function() {
                $(this).dialog("close");
            }
        }
    });
    // load remote content
    dialog.load(
    url, {}, function(responseText, textStatus, XMLHttpRequest) {
        dialog.dialog();
    });

    return dialog;
}

//call it like this:
var dialog = openDynamicDialog();
//..code
//close it:
dialog.dialog('close');

OR

если вам все еще нужен return false, вы можете сделать это в строке var dialog функции: 

var dialog = $('<div>', {id: 'dialog_id'}).css('display','none').appendTo('body');

, а затем ссылаться на него извне: 

var dialog = $('#dialog_id');
...