Question

使用jQuery模式对话框。

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

决定使用iFrame加载modal页面以避免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）Page Both包含相同的HTML / JS内容

问题是对齐问题。它定位不好。我试图解决我的问题，但我不知道创建两个HTML文件并链接它们。尝试了 FIDDLE

的版本

enter image description here

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

Answer 1

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

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

1 个答案: