1

子ウィンドウが開いたらすぐに親ウィンドウを無効にしようとしています。ポップウィンドウが開かれるたびに、親ウィンドウをグレーアウトしたいと思います。

以下は私のポップアップウィンドウのコードです-

<html>
<head>
    <title>Applying</title>
</head>
<body>

<script>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        });
    return vars;
}
var variable1 = getUrlVars()["parameter1"];    

var myScript = document.createElement('script');

myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', 'admin@domain.net');

document.body.appendChild(myScript);                              
</script>

<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='some_url'">
</body>
</html>

以下は私の親ウィンドウコードです-

<html>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=650,left = 570,top = 300');");
}
</script>
<input type=button value="Apply" onClick="javascript:popUp('popup_window_url')">
</body>
</html>

ここで親ウィンドウを無効にする最も簡単な方法は何ですか? 上記のコードの例は、簡単な例を理解するのに大いに役立ちます。

stackoverflow に関する他のさまざまな投稿を見ましたが、これらをコードに組み込む方法を理解できません。私はこのようなことをしようとしています。

どんな提案でも大いに役立ちます。

4

2 に答える 2

1

iframe サポートhttp://jsfiddle.net/LT5JC/を使用して、この質問の回答からフィドルを更新しました

開く機能はかなりシンプルです

function open(url) {
    $('#block').fadeIn(); // show grayed pane
    $('#iframe').attr('src', url); // update src of iframe
    $('#container').fadeIn(); // show container with iframe
}
于 2013-07-27T21:58:01.497 に答える
0

あなたが示した例では、新しいブラウザウィンドウという意味でポップアップを使用していませんがdiv、新しいコンテンツが読み込まれる既存のページで使用しています。Ajax 呼び出しを使用してポップアップにデータを入力するため、この方法は可能です。2 番目のページへの Ajax 呼び出しを使用することで、要求がいつ終了したかを知ることができ、必要に応じて背景をフェードアウトできます。本当にしたい場合は、iFrame を使用して、それがいつロードされたかを確認できますが、私の意見では、この方法はあまり良くありません。

jQuery を使用した簡単な実装:

var cover = $("<div id='cover'></div>");
var content = $("#content"),
    popup_window = $("#popup-window"),
    popup_launcher = $("#popup-launch");

// When we click a button, load our new content into our popup
// and fade the window in once the request has completed. Also,
// fade our cover in, thus restricting the user from clicking the content beneath
popup_launcher.on("click", function() {
    popup_window.load(child_url, function() {
        popup_window.fadeIn();
        content.fadeIn(cover);
    });
});
// When a close button is clicked inside the popup window, fade it out.
popup_window.on("click", ".close", function() {
    popup_window.fadeOut();
    cover.fadeOut();
});

CSS

#cover {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:2;
    display:none;
    background:RGBA(0,0,0,0.5);
}
#popup-window {
    position:fixed;
    left:30%;
    right:30%;
    top:30%;
    bottom:30%;
    z-index:3;
}

非常に単純な例ですが、#coverは の下に配置する必要があるため、これを確実にするためにプロパティ#popup-windowを使用します。z-index

編集- Ajax メソッドの方が優れていますが、 HTTP アクセス制御により、(通常は)同じド​​メインのページしか要求できないことに注意してください。そのため、外部リソースを開く必要がある場合は、おそらくiFrame ソリューションを使用する必要があります。

于 2013-07-27T21:58:49.403 に答える