Q&A
jquery modal で関係要素が反応してしまう
jeuryを使って、モーダルを作っています。
表示はできたのですが、閉じる動作がうまくいきませんでした。。。
ソース
<!DOCTYPE html> <html> <head> <meta charaset="utf-8"> <title>サンプル</title> <style> .fullOverlay{ position: absolute; left: 100px; top: 50px; width: 300px; height: 100px; border: 2px solid gray; padding-top: 15px; z-index: 2147483647; display: block !important; } #box{ display: none; } input[type="text"]{ margin: 5px; } </style> </head> <body> <button id="target">クリック</butoon> <div id="box"> <div id="close">X</div> <form action=""> <label for=""> 名前: <input type="text"> </label> <br> <label for=""> Email: <input type="text"> </label> <br> <input type="submit" value="送信"> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> (function () { $('#target').click(()=> { console.log("#target") $('#box').addClass("fullOverlay") }) $('#close').click(() => { console.log("#close") $('#box').removeClass("fullOverlay") }) }()); </script> </body> </html>
実装の大枠
モーダル要素には、display:none;が初期状態で当たっています。
クリックボタンを押すと、display: block;
Xを押すと fullOverlayクラスを外して、display:none;にする動作が
期待する動作です。
キャプチャー
- 初期状態
- クリックすると
モーダル的なものが表示されます
- Xをクリックして非表示を試みるもうまく行かず
Xをクリックして、コンソールログで見ていると、
Xをクリックして、$('#close')のイベントだけを発火させたいのに
$('#target')のイベントも発火してしまいうまくいきません。
どなたか原因がお分かりになる方はいらっしゃいますか？
回答1件
0
ベストアンサー
HTML
1 <button id="target">クリック</butoon> <!-- button の間違い -->
閉じタグが間違っているので、以降の要素がすべて<button id="target">の子要素になってしまっています。
閉じるボタンのクリックイベントが発生すると、親要素である<button id="target">にもそのイベント伝搬して、
modalを開く命令がmodalを閉じた直後に実行されているようです。
投稿2020/07/11 06:53
編集2020/07/11 06:55
総合スコア121
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/11 07:42