前提
モーダルウィンドウを実装したいと思い、HTML,css,JavaScriptを記入しています。
ネット上の実装方法をいくつか試してみたのですが、モーダルウィンドウがオープンしないので、見ていただきたいです。
実現したいこと
・モーダルウィンドウをオープンさせる
発生している問題・エラーメッセージ
・ボタンはつくれているものの、クリックしてもモーダルウィンドウがオープンされない。
該当のソースコード
HTML
1<button class="modal-open" id="js-open">モーダルウィンドウオープン</button> 2<!-- 追記ここから --> 3<div class="modal" id="js-modal"> 4 <div class="modal-close__wrap"> 5 <button class="modal-close" id="js-close"> 6 <span></span> 7 <span></span> 8 </button> 9 </div> 10 <p>コンテンツ・内容が入ります。</p> 11</div> 12<!-- 追記ここまで -->
css
1.modal-open { 2 cursor: pointer; 3 background: orange; 4 border: orange; 5 color: #fff; 6 padding: 10px 12px; 7} 8 9.modal { 10 width: 65%; 11 height: 80%; 12 border: 1px solid #000; 13 position: fixed; 14 top: 50%; 15 left: 50%; 16 transform: translate(-50%, -50%); 17 background: #fff; 18 display: none; 19} 20 21.modal p { 22 position: absolute; 23 top: 50%; 24 left: 50%; 25 text-align: center; 26 transform: translate(-50%, -50%); 27 z-index: 10; 28 font-size: 14px; 29} 30 31.modal-close__wrap { 32 position: absolute; 33 right: 40px; 34 top: 20px; 35} 36 37.modal-close { 38 background: transparent; 39 border-color: transparent; 40 padding: 0; 41 margin: 0; 42 cursor: pointer; 43 width: 28px; 44 display: block; 45 height: 28px; 46} 47 48.modal-close span { 49 position: relative; 50 width: 100%; 51 height: 1px; 52 background: black; 53 display: block; 54} 55 56.modal-close span:nth-child(1) { 57 transform: rotate(45deg); 58} 59 60.modal-close span:nth-child(2) { 61 transform: rotate(-45deg); 62} 63 64.modal { 65 position: fixed; 66 top: 50%; 67 left: 50%; 68 transform: translate(-50%, -50%); 69} 70 71.overlay { 72 position: fixed; 73 width: 100%; 74 height: 100%; 75 background: grey; 76 opacity: .6; 77 z-index: 0; 78 top: 0; 79 left: 0; 80 right: 0; 81} 82
JaveScript
1const modal = $("#js-modal"); 2const overlay = $("#js-overlay"); 3const close = $("#js-close"); // 追記 4const open = $("#js-open"); 5 6open.on('click', function () { //ボタンをクリックしたら 7 modal.addClass("open"); // modalクラスにopenクラス付与 8 overlay.addClass("open"); // overlayクラスにopenクラス付与 9}); 10 11// 追記 12close.on('click', function () { //×ボタンをクリックしたら 13 modal.removeClass("open"); // modalクラスからopenクラスを外す 14 overlay.removeClass("open"); // overlayクラスからopenクラスを外す 15});
試したこと
ネット上に上がっているモーダルウィンドウの例をいくつか試してみました。
どれも、ボタンの実装まではいくのですが、モーダルウィンドウはオープンされません。
宜しくお願いいたします。
回答2件