使用 jQuery 模式对话框。
我有一个链接，点击它我必须在模式中加载一个页面。这个页面有一些特定于页面的 javascript，并且也有相同的名称，在许多控件的父页面中使用的 id。
决定使用 iFrame 以模态加载页面以避免 id 冲突。
父.html
<h3>
Modal Inside Modal Sample</h3>
<a href="javascript:void(0);" id="lnkPopup">Open Main Modal</a>
<br />
<input id="txt-first-name" name="FirstName" type="text" value="" />
<br />
<input id="txt-last-name" name="LastName" type="text" value="" />
这是javascript代码
$(document).ready(function () {
$('#lnkPopup').click(function (e) {
e.preventDefault();
openModalPopup();
});
});
var myModalDialog;
function openModalPopup() {
myModalDialog = null;
var pageUrl = 'popup.html';
var dialogFrame = $('<iframe src="' + pageUrl + '" frameborder="0" scrolling="no"></iframe>');
myModalDialog = dialogFrame.dialog({
modal: true,
resizable: false,
draggable: false,
autoOpen: true,
position: "fixed",
closeOnEscape: true,
height: 500,
width: 764,
open: function () {
var scrollPosition = [self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
dialogFrame.css('width', '700px');
dialogFrame.css('overflow-y', 'hidden');
},
close: function () {
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$(this).dialog('destroy').remove();
}
}).dialog('open');
return false;
}
注意：最重要的是弹出页面也有链接，并在我们单击时以模式打开。在模态中打开一个模态，两个模态 url 是相同的。
POPUP(popup.html) 和 Parent(parent.html) 页面都包含相同的 HTML/JS 内容
问题是对齐问题。它没有很好地定位。我试图解决我的问题，但我不知道创建两个 html 文件并链接它们。尝试过的FIDDLE版本
请帮我解决这个模态对齐问题。每个模态应该精确地定位在我们打开的其他模态之上。