モーダル内のコンテンツをクリックするとモーダルが閉じてしまう

[liberta793]

モーダル内のコンテンツをクリックするとモーダルが閉じてしまいます。 閉じるボタンとオーバーレイをクリックした時だけ閉じるようにしてください。

[YukaMurata]

お疲れ様です。 overlayにのみfadeOutの処理を与えると、z-indexの関係か、処理が走りません。週明けにでも教えていただければと思います。よろしくお願いいたします。

[liberta793]

z-indexの関係か、処理が走りません。

modalクラスoverlayクラスより、手前にきているようなのでmodalクラスにクリック時の処理を追加してください。

しかし、普通にmodalクラスに処理を追加すると、モーダル内のコンテンツをクリックしてもモーダルが閉じてしまうため、以下のようにmodal_contentクラスをクリック時の処理にe.stopPropagationを利用してください。

$('.modal_content').click(function (e) {
    e.stopPropagation();
});

e.stopPropagationは親要素のイベントの伝播を防ぐメソッドです。 通常の場合はmodal_contentクラスをクリックすると、その親要素であるmodalクラスにもクリックイベントが伝播していまい、モーダルを閉じる処理が実行されてしまいます。

しかし、e.stopPropagationを利用すれば、modal_contentクラスをクリックしてもmodalクラスにはクリックイベントが伝播しないです。そのため閉じる処理は実行されないです。

上記説明がわかりづらい場合、聞いてください。

[YukaMurata]

ありがとうございます。 上記、対応いたしました。 c0ab916 ご確認よろしくお願いいたします。

[liberta793]

確認できました!