前提・実現したいこと
modalの実装で困っています。
今回modalのオーバーレイ(背景)をクリックしたときと特定の要素(閉じるボタンなど)をクリックしたときのみ
modalを閉じたいのですがmodalのコンテンツを押したときでもmodalがクローズしてしまいます。
(コンテンツをクリックされたときはクリックイベントを発火させたくありません)
発生している問題・エラーメッセージm
エラーメッセージ
該当のソースコード
HTML
<div class="popup-lineUp_2019" id="js-popUp2019"> <div class="popup-inner_2019"> <img src='../img/cafe-cp11/lineUp_popup.png'> <a class="popup-closeBtn1_2019"><img id="js-popUp2019" src='../img/cafe-cp11/popupClose_off.png' alt="閉じる"></a> <a class="popup-closeBtn2_2019"><img id="js-popUp2019" src='../img/cafe-cp11/xbtn.png' alt="閉じる"></a> </div> </div>
css
.popup-lineUp_2019 {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
overflow-y: scroll;
background-color: rgba(0,0,0,0.8);
}
.popup-inner_2019 {
position: absolute;
right: 50%;
top: 100px;
transform: translateX(50%);
z-index: 2;
pointer-events: none;
}
jQuery
$('#js-popUp2019').on('click',function(){
$('#js-popUp2019').fadeOut();
return false;
});
試したこと
コンテンツに pointer-events: none;を指定したりz-indexで調整したりはトライしました。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。