1

jQuery モーダル ダイアログの操作。

リンクがあります。それをクリックすると、モーダル内にページをロードする必要があります。このページには、ページ固有の JavaScript がいくつかあり、多くのコントロールの親ページで使用される同じ名前、ID もあります。

ID の競合を避けるために、iFrame を使用してモーダルでページを読み込むことにしました。

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 コンテンツが含まれています

問題はアライメントの問題です。ポジショニングが良くない。私は自分の問題をいじろうとしましたが、2つのhtmlファイルを作成してそれらをリンクすることについてはわかりません。FIDDLEの試用版

ここに画像の説明を入力

このモーダル配置の問題を解決するのを手伝ってください。各モーダルは、開いている他のモーダルの上に正確に配置する必要があります。

4

1 に答える 1

0

これらのダイアログを開くには、メイン ウィンドウで関数を作成する必要があります。次に、ダイアログ内のすべてのリンクは、(メイン ウィンドウから) を呼び出してその関数を呼び出す必要がありますwindow.parent.your_function_name()。

于 2013-08-14T16:40:59.657 に答える