複数モーダルの作成について

実現したいこと

ボタン１を押下するとボタン１の内容のモーダル
ボタン２を押下するとボタン２の内容のモーダル
がでるようにしたい

発生している問題・分からないこと

モーダルが２つ出てきてしまう

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="style.css">
7
8</head>
9
10<body>
11  <div id="modal-container">
12    <div class="modal-background">
13      <div class="modal" id="modal1">
14        <p>ボタン１の内容</p>
15      </div>
16      <div class="modal" id="modal2">
17        <p>ボタン２の内容</p>
18      </div>
19    </div>
20  </div>
21
22
23  <div class="content">
24
25    <div class="buttons">
26      <div class="one button" data-target="modal1">ボタン１</div>
27      <div class="one button" data-target="modal2">ボタン２</div>
28    </div>
29  </div>
30
31  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
32
33</body>
34
35</html>
36
37
38<script>
39  $('.button').click(function () {
40    var buttonId = $(this).attr('class');
41    $('#modal-container').removeAttr('class').addClass(buttonId);
42    $('body').addClass('modal-active');
43  })
44
45  $('#modal-container').click(function () {
46    $(this).addClass('out');
47    $('body').removeClass('modal-active');
48  });
49</script>

css
1#modal-container {
2  position: fixed;
3  display: table;
4  height: 100%;
5  width: 100%;
6  top: 0;
7  left: 0;
8  transform: scale(0);
9  z-index: 1;
10
11}
12
13#modal-container.one {
14  transform: scaleY(0.01) scaleX(0);
15  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
16}
17
18#modal-container.one .modal-background .modal {
19  transform: scale(0);
20  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
21}
22
23#modal-container.one.out {
24  transform: scale(1);
25  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
26}
27
28#modal-container.one.out .modal-background .modal {
29  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
30}
31
32#modal-container .modal-background {
33  display: table-cell;
34  background: rgba(0, 0, 0, 0.8);
35  text-align: center;
36  vertical-align: middle;
37}
38
39#modal-container .modal-background .modal {
40  background: white;
41  padding: 50px;
42  display: inline-block;
43  border-radius: 3px;
44  font-weight: 300;
45  position: relative;
46}
47
48
49.content .buttons {
50  max-width: 800px;
51  margin: 0 auto;
52  padding: 0;
53  text-align: center;
54}
55
56.content .buttons .button {
57  display: inline-block;
58  text-align: center;
59  padding: 10px 15px;
60  margin: 10px;
61  background: red;
62  font-size: 18px;
63  background-color: #efefef;
64  border-radius: 3px;
65  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
66  cursor: pointer;
67}
68
69.content .buttons .button:hover {
70  color: white;
71  background: #009bd5;
72}
73
74@keyframes unfoldIn {
75  0% {
76    transform: scaleY(0.005) scaleX(0);
77  }
78
79  50% {
80    transform: scaleY(0.005) scaleX(1);
81  }
82
83  100% {
84    transform: scaleY(1) scaleX(1);
85  }
86}
87
88@keyframes unfoldOut {
89  0% {
90    transform: scaleY(1) scaleX(1);
91  }
92
93  50% {
94    transform: scaleY(0.005) scaleX(1);
95  }
96
97  100% {
98    transform: scaleY(0.005) scaleX(0);
99  }
100}
101
102@keyframes zoomIn {
103  0% {
104    transform: scale(0);
105  }
106
107  100% {
108    transform: scale(1);
109  }
110}
111
112@keyframes zoomOut {
113  0% {
114    transform: scale(1);
115  }
116
117  100% {
118    transform: scale(0);
119  }
120}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

２つモーダルが立ち上がってしまった

補足

特になし

行動規範の内容に同意します

回答2件

ベストアンサー

せっかくボタンに data-target="modal2" のようなデータ属性があるのに、利用していませんね。

質問文のコードから最小の変更で動くようにするには、

スタイルシートの #modal-container .modal-background .modal のルールセットの display: inline-block; を display: none; に変更
スタイルシートに以下を追加

css
1#modal-container.modal1 #modal1 {
2  display: inline-block;
3}
4#modal-container.modal2 #modal2 {
5  display: inline-block;
6}

クリックイベントリスナの var buttonId = ... の行を削除
クリックイベントリスナの2行目のaddClass() を次のように変更:

js
1    $('#modal-container').removeAttr('class').addClass(`one ${this.dataset.target}`);

投稿2024/04/19 12:55

int32_t

総合スコア20909

akiakiakiaki

2024/04/20 01:33

ありがとうございます！ display: none; の影響かモーダルが表示されなくなってしまいました..

int32_t

2024/04/20 02:44 編集

それは、「スタイルシートに以下を追加」か「addClass() を次のように変更」のどちらかでミスしていると思います。ボタンをクリックしたときに #modal-container に class="one modalN" が付くかどうか確認しましょう。

akiakiakiaki

2024/04/20 02:46

回答ありがとうございます。解決しました !!!!! ベストアンサーに選ばせていただきました。大変ありがとうございました！

行動規範の内容に同意します

モーダルなのですから排他処理が必要です。
基本的にはdialogで処理するのが楽だとおもいます

javascript
1<script>
2document.addEventListener('click', ({target})=>{
3  if(target.matches('[data-target]')){
4    document.querySelector(`#${target.dataset.target}`).showModal();
5  }
6  if(target.matches('.close')){
7    target.closest('dialog').close();
8  }
9});
10</script>
11<div id="modal-container">
12    <div class="modal-background">
13      <dialog id="modal1">
14        <p>ボタン１の内容</p>
15        <div class="close">閉じる</div>
16      </dialog>
17      <dialog id="modal2">
18        <p>ボタン２の内容</p>
19        <div class="close">閉じる</div>
20      </dialog>
21    </div>
22  </div>
23
24
25  <div class="content">
26
27    <div class="buttons">
28      <div class="one button" data-target="modal1">ボタン１</div>
29      <div class="one button" data-target="modal2">ボタン２</div>
30    </div>
31  </div>