javascript - クリックしてモーダルポップアップを閉じる

Question

このチュートリアルを使用して、モーダル画面を追加しています:

それを閉じることを除いて、すべてがうまく機能します。ボタンで閉じるのではなく、モーダルの外側、つまりその背後にあるページの残りの部分をクリックして閉じるオプションをユーザーに提供したいと考えています。

onclick='overlay()'ユーザーから、このようにオーバーレイ divに追加するように言われました<div id="overlay" onclick='overlay()'>

外側をクリックしてモーダルを閉じようとすると動作しますが、実際のモーダル自体をクリックすると閉じます。これは登録フォームであるため、望ましくありません。実際のモーダル自体の外側をクリックするだけでモーダルを閉じる方法はありますか?

score 2 · Accepted Answer

これを試して：

$(document).ready(function(){
$('#overlay').bind('click', function(event){
    if (event.target == $('#overlay').get(0))
        overlay(); 
});

score 0 · Accepted Answer

オーバーレイのコードをモーダルウィンドウから移動する必要があります。これを分離すると、ウィンドウの親としてオーバーレイがなくなり、クリックイベントはオーバーレイでのみトリガーされます。

<div id="overlay"> </div>
<div id="modalWindow">
    <p>Content you want the user to see goes here.</p>
</div>

2 に答える 2