2017-02-06 4 views
0

У меня есть структура пользовательского интерфейса, которая плохо себя ведет, и мне интересно, если добавить к ней какие-то глаза, это поможет мне увидеть что-то, что мне не хватает, или, если это не поможет, помогите мне найти обходное решение.JQuery UI: закрытие вложенных модальных диалогов iframe

У меня есть страница, которая загружает модальный диалог jquery UI, содержащий iframe. Этот iframe загружает страницу, которая может открыть другой модальный код, содержащий другой iframe. Этот вложенный iframe содержит страницу с кнопкой, которая должна закрыть текущий модальный. Однако эта кнопка не работает. Вот концептуальная модель макета (отметив, что каждый IFrame содержится в модальном дел):

- page1 
    - iframe1 
    - page2 
     - iframe2 
     - page3 
      - button -> close iframe2 (fails) 

Обратите внимание, что это концептуальный, не так, как на самом деле DOM выложили. Кроме того, на странице 2 есть кнопка, закрывающая iframe1, и она работает. Однако попытка выполнить ту же функцию между страницами 3 и iframe2 не удалась. Он может найти диалог div, но он дает мне возможность «не вызывать методы в диалоговом окне до инициализации», попытался вызвать метод «закрыть» jQuery UI error.

Вот некоторые дополнительные замечания, которые могут помочь: каждый модальный div, независимо от уровня вложенности, добавляется к основному элементу тела верхнего уровня из-за свойства appendTo каждого диалога. Добавление кнопок через функцию диалога (например, кнопки «X» на дисплее в примере) работает. Так ясно, что есть скрытый крюк, который отлично работает. В других ответах на SO каждый iframe уже вызывает родительский экземпляр jQuery, чтобы попытаться закрыть их содержащий диалог. Добавление произвольных номеров .parent для учета повышенных уровней вложенности не решило проблему.

Вот полный текст моего образца приложения: стр.1

<html> 
<head> 
<link rel="stylesheet" href="jquery-ui.min.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    function make1() { 
     var self = $("<div id='one'></div>"); 
     var frame = $("<iframe style='width:100%;height:100%' />"); 
     self.html(frame); 
     self.dialog({ 
      title: 'One', 
      autoOpen: false, 
      modal: true, 
      appendTo: $(window.document).find('body'), 
      width: 300, 
      height: 200, 
      overlay: 0.5, 
      close: function() { 
       self.dialog('destroy'); 
      } 
     }); 
     self.dialog('open'); 
     frame.attr("src", "http://localhost:81/page2.html"); 
    } 

</script> 
</head> 
<body> 
<button onclick="make1()">Open 1</button> 
</body> 
</html> 

стр.2:

<html> 
<head> 
<link rel="stylesheet" href="jquery-ui.min.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 
<script type="text/javascript"> 

    var dialog; 

    function make2() { 
     var self = $("<div id='two'></div>"); 
     dialog = self; 
     var frame = $("<iframe style='width:100%;height:100%' />"); 
     self.html(frame); 
     self.dialog({ 
      title: 'Two', 
      autoOpen: false, 
      modal: true, 
      appendTo: $(window.parent.document).find('body'), 
      width: 300, 
      height: 200, 
      overlay: 0.5, 
      close: function() { 
       self.dialog('destroy'); 
      } 
     }); 
     self.dialog('open'); 
     frame.attr("src", "http://localhost:81/page3.html"); 
    } 

    function kill1() { 
     window.parent.$("#one").dialog('close'); 
    } 


</script> 
</head> 
<body> 
<button onclick="make2()">Open 2</button> 
<button onclick="kill1()">Kill 1</button> 
</body> 
</html> 

... и page3, страница проблема:

<html> 
<head> 
<link rel="stylesheet" href="jquery-ui.min.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 
<script type="text/javascript"> 

    function kill2() { 
     var dialog = window.parent.$("#two") 
     if(dialog.length > 0) { 
      alert("found it; closing dialog..."); 
      dialog.dialog('close'); 
     } 
    } 


</script> 
</head> 
<body> 
<button onclick="kill2()">Kill 2</button> 
</body> 
</html> 

последняя, ​​кнопка «Убить 2» - это ошибка с ошибкой.

ответ

0

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

function kill2() { 
    var dialog = window.parent.$("[aria-describedby='two']") 
    if(dialog.length > 0) {  
     var zIndex = dialog.css("z-index") -1; 
     var overlay; 
     dialog.siblings(".ui-widget-overlay.ui-front").each(function(index, item) { 
      if($(item).css("z-index") == zIndex) 
       overlay = item; 
     }); 
     if(overlay) { 
      $(overlay).remove(); 
     } 
     dialog.remove(); 
    } 
} 

По существу, он находит родительский элемент диалога (опять же, по деталям реализации этого добавления атрибута ария-desribedby к нему), а затем он ищет братьев и сестер этого элемента для наложения (если модальный : true, это будет там, иначе оно не будет существовать). Для произвольного количества вложенных диалогов вы можете найти подходящий оверлей, ища z-индекс, который меньше, чем у вашего диалога. Затем он удаляет оверлей и диалог.

Одним из ключевых замечаний является то, что это, очевидно, обходит любую логику в методе close: метод, предоставленный диалогу. Вам нужно будет воссоздать эту логику в этом методе, если вы хотите его выполнить.

Смежные вопросы