带有多个对话框的 iFrame 位置的 jQuery UI 对话框

Question

使用 jQuery 模式对话框。

我有一个链接，点击它我必须在模式中加载一个页面。这个页面有一些页面特定的 javascript 并且也有相同的名称，id 用于许多控件的父页面。

决定使用 iFrame 以模态加载页面以避免 id 冲突。

Parent.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

的试用版

请帮我解决这个模态对齐问题。每个模态都应准确定位在我们打开的其他模态的顶部。

Answer 1

您必须在主窗口中创建一个函数才能打开这些对话框。 然后对话框中的每个链接都应该调用该函数（从主窗口） 打电话给window.parent.your_function_name()。