У меня есть структура пользовательского интерфейса, которая плохо себя ведет, и мне интересно, если добавить к ней какие-то глаза, это поможет мне увидеть что-то, что мне не хватает, или, если это не поможет, помогите мне найти обходное решение.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» - это ошибка с ошибкой.