0
ポップアップ（divを使用）がある場合、divの外のどこかをクリックしたときにdivを隠し状態に戻すにはどうすればいいですか？ポップアップがポップアップエリアの外をクリックしたときに非表示に戻る
ポップアップが表示されている場合、誰かがポップアップの外側をクリックすると、divは再び非表示になります。
どうすればこの機能を実現できますか？
A
答えて
5
これを行う一般的な方法は、オーバーレイを使用する方法です。あなたも、画面全体を占め、すぐその下<div id="overlay">を作成し、あなたのdivポップアップを作成する場合：
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
必要に応じて、あなたは、例えば、background: #000とopacity: 0.5で他のすべてのコンテンツを暗くするために、このオーバーレイを使用することができます。
ポップアップのすぐ下にこのオーバーレイを追加するようにJavaScriptを作成したら、それにクリックリスナーを追加します。ユーザーがオーバーレイをクリックすると、ポップアップの外側をクリックしたことがわかります。
古いブラウザーではposition: fixedは機能しません。 1つの回避策は、オーバーレイが表示されているときにオーバーレイをposition: absoluteに設定し、ユーザーがスクロールしないように<body>に一時的にoverflow: hiddenを追加することです。私にまっすぐ進むより多くのようだ、それを行うための
3
別の方法は、この次のとおりです。要するに
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#popup").remove();
$("body").unbind("click");
}
});
、originalTargetは、実際にクリックされたもので、#popupのいずれかである場合、スクリプトは、チェックしますその祖先（jQueryのparentsと呼ばれます）。そうでない場合は、クリックが外にあり、ポップアップを削除します。
+0
iframeを使用している場合、これは動作しません。 – laktak
ああ、そうですね、それは人々がそれを行う方法です。基本的にyoruポップアップが表示されているときに、外側のdiv（オーバーレイ）に属性を追加して灰色にし、クリックイベントをattach ...bingo！ありがとう –