前提・実現したいこと
クリックイベントでモーダルウィンドウとオーバーレイを出現・除去をトグルさせるプログラムにおいて、オーバーレイをDOMごと消したい。
発生している問題・エラーメッセージ
下記のコードを書きましたが、 .remove()
の書き方が悪いのかオーバーレイのDOMが残ってしまい消えてくれません。
オーバーレイをフェイドアウト後にDOMごと消すにはどこを直せばいいでしょうか? どうぞ宜しくお願いいたします。
動くサンプル https://jsfiddle.net/vam4zwdd/
該当のソースコード
html
1<button type="submit" class="js-modal-open">保存</button> 2 3<div id="modal_content"> 4</div>
css
1#modal-overlay { 2 z-index: 1001; 3 display: none; 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 100vh; 9 background-color: rgba(0, 0, 0, .5); 10} 11 12#modal_content{ 13 width: 100px; 14 height: 100px; 15 background:red; 16 position: absolute; 17 left: 50%; 18 top: 50%; 19 transform: translate(-50%, -50%); 20 padding: 15px 10px 30px; 21 display: none; 22 z-index: 1002; 23}
js
1"use strict"; 2 3var $modal_content = $("#modal_content"), 4 $modal_overlay = $("#modal-overlay"), 5 $modal_open = $(".js-modal-open"); 6 7//モーダル出現クリックイベント 8$modal_open.on("click", function(e) { 9 $(this).blur(); 10 //背景固定 11 $("body").css({ 12 position: "fixed", 13 width: "100%", 14 height: "100vh", 15 overflow: "hidden" 16 }); 17 //オーバーレイを出現させる 18 $("body").append( 19 '<div id="modal-overlay" tabindex="-1" aria-hidden="true"></div>' 20 ); 21 $("#modal-overlay").fadeIn(); 22 $modal_content.fadeIn(); 23 //閉じる 24 $(function() { 25 var close = $("#modal-overlay, .js-button--close"); 26 var modalset = $("#modal_content, #modal-overlay"); 27 close.on("click", function() { 28 //背景固定解除 29 $("body").attr({ 30 style: "" 31 }); 32 modalset.fadeOut(function() { 33 $modal_overlay.remove(); 34 close.off("click"); 35 }); 36 }); 37 }); 38}); 39
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。