带有 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()。