前提

モーダルウィンドウを実装したいと思い、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});

試したこと

ネット上に上がっているモーダルウィンドウの例をいくつか試してみました。
どれも、ボタンの実装まではいくのですが、モーダルウィンドウはオープンされません。
宜しくお願いいたします。

miyabi_takatsuk

2022/12/27 03:08

表示が叶わない、ブラウザ、そのバージョン、検証に使用しているPCのOSを記載してください。

回答2件

ベストアンサー

.modalにdisplay: noneが入っていますが、これが.openに変化しても打ち消されていないために、表示がなされない状態です。

投稿2022/12/27 02:06

maisumakun

総合スコア142279

回答へのコメント

7seHAL

2022/12/27 02:18

ありがとうございます！ display:none;　を打ち消すために、.modal-open に display:block　などを入れてみましたが、打ち消すことができません…。 display:none;　を打ち消すためにどのような方法があるのでしょうか。初心者なもので、初歩的な質問でしたら申し訳ないです。

maisumakun

2022/12/27 02:20

> display:none;　を打ち消すために、.modal-open に display:block　などを入れてみましたが、打ち消すことができません…。 .modal-openはボタンに与えられたクラスです。.modal.openにスタイルをかけましょう。

7seHAL

2022/12/27 02:29

.modal.openにdisplay:block;のスタイルをかけたのですが、打ち消すことができませんでした…。 .openだけにもスタイルをかけてみましたが、こちらも変化なしです。

maisumakun

2022/12/27 02:31

> .modal.openにdisplay:block;のスタイルをかけたのですが、打ち消すことができませんでした…。開発ツールで、どのスタイルからどのクラスが適用されているか、状況を確認してみましょう。

7seHAL

2022/12/27 02:50

開発ツールで、改めて.modalのdisplay: noneさえ打ち消すことができれば表示されることがわかりました。が、問題の打ち消し方がわからず、 .modal.open open>.modal などにdisplay:block;のスタイルをかけてみましたが、どれも的外れなようです…。

miyabi_takatsuk

2022/12/27 04:35 編集

横から失礼します。検証ツール上でも、スタイルを割り当てることができます。検証ツール上でスタイルを割り当ててみて、表示できた状態のスタイルを、 JSで同じようにコントロールされるように組む、といったことをやってみてはいかがかと思います。 ↑すみません、既に検証ツールでいろいろやっていたのですね・・・。的外れコメントすみません。

maisumakun

2022/12/27 03:50

.modal.openで打ち消せないというのは妙ですね…書いていない他のコードや、jQuery以外のライブラリが存在する状況ではありませんか？

7seHAL

2022/12/27 12:19

.modal.openで打ち消せました！他の、スライダーを実装するためのscriptが邪魔をしていたみたいです。お手数をおかけしました。今回、二つ以上のクラスの合わせ技に考えが至らなかったので、次に生かそうと思います。ありがとうございました！

modal処理はdialogを利用ください

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const mdl=document.querySelector('#js-modal');
4  document.querySelector('#js-open').addEventListener('click',()=>{
5    mdl.showModal();
6  });
7  document.querySelector('#js-close').addEventListener('click',()=>{
8    mdl.close();
9  });
10});
11</script>
12<button class="modal-open" id="js-open">モーダルウィンドウオープン</button>		
13<dialog class="modal" id="js-modal">
14  <div class="modal-close__wrap">
15    <button class="modal-close" id="js-close">
16      <span>close</span>
17    </button>
18  </div>
19  <p>コンテンツ・内容が入ります。</p>
20</dialog>

非推奨

古いブラウザ環境をご利用ということであれば、開発終了してメンテナンスモードに入ったjQueryUIで処理するてもあります。

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
4<script>
5$(function(){
6  $('#js-modal').hide();
7  $('#js-open').on('click',function(){
8    $('#js-modal').dialog({
9    modal:true,
10    title:"モーダルテスト",
11    buttons:{
12      "close":function(){
13        $(this).dialog("close");
14      }
15    },
16    });
17  });
18});
19
20</script>
21<button class="modal-open" id="js-open">モーダルウィンドウオープン</button>		
22<!-- 追記ここから -->
23<div class="modal" id="js-modal">
24  <p>コンテンツ・内容が入ります。</p>
25</div>
26<!-- 追記ここまで -->