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

Question

使用jQuery模式对话框。

我有一个链接，点击它，我必须在一个modal.This页面中加载一个页面，它有一些特定于页面的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.html)和父页面(parent.html)都包含相同的/JS内容。

问题是对齐问题。它的定位不是很好。我试图篡改我的问题，但我不知道如何创建两个html文件并将它们链接起来。试用版小提琴

​

​

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

Answer 1

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