ページの再読み込みをした時にモーダルが表示されてしまう

解決したいこと
ボタンを押したときだけ、モーダルを表示したいです。

問題
ページの再読み込み時にモーダルが表示されてしまう。

試したこと
CSSの#modalをopacity: 0;にしました。

よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Modal Window</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <section id="modal" class="hidden">
10    <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
11　　　　こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
12    <div id="close">
13      閉じる
14    </div>
15  </section>
16  
17  <div id="open">
18    詳細を見る
19  </div>
20
21  <div id="mask" class="hidden"></div>
22
23
24  <script src="js/main.js"></script>
25</body>
26</html>

CSS
1body {
2    font-size: 14px;
3  }
4  
5  #open, #close {
6    cursor: pointer;
7    width: 200px;
8    border: 1px solid #ccc;
9    border-radius: 4px;
10    text-align: center;
11    padding: 12px 0;
12    margin: 16px auto 0;
13  }
14  
15  #mask {
16    background: rgba(0, 0, 0, 0.4);
17    position: fixed;
18    top: 0;
19    bottom: 0;
20    right: 0;
21    left: 0;
22    z-index: 1;
23  }
24  
25  #modal {
26    background: #fff;
27    width: 300px;
28    padding: 20px;
29    border-radius: 4px;
30    position: absolute;
31    top: 40px;
32    left: 0;
33    right: 0;
34    margin: 0 auto;
35    z-index: 2;
36    opacity: 0;
37  }
38  
39  #modal > p {
40    margin: 0 0 20px;
41  }
42  
43  #mask.hidden {
44    display: none;
45  }
46  
47  #modal.hidden {
48    animation: Fade-Out 1s;
49    
50  }
51
52  #modal.open {
53    animation: Fade-In 1s;
54    animation-fill-mode: forwards;
55  }
56
57  @keyframes Fade-In {
58      0% {opacity: 0;}
59      100% {opacity: 1;}
60  }
61
62  @keyframes Fade-Out {
63    0% {opacity: 1;}
64    100% {opacity: 0;}
65  }

JavaScript
1'use strict';
2
3{
4  const open = document.getElementById('open');
5  const close = document.getElementById('close');
6  const modal = document.getElementById('modal');
7  const mask = document.getElementById('mask');
8
9  open.addEventListener('click', () => {
10    modal.classList.add('open');
11    mask.classList.remove('hidden');
12  });
13
14  close.addEventListener('click', () => {
15    modal.classList.remove('open');
16    mask.classList.add('hidden');
17  });
18
19  mask.addEventListener('click', () => {
20    // modal.classList.add('hidden');
21    // mask.classList.add('hidden');
22    close.click();
23  });
24}

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

回答1件

JavaScript
1
2window.onload = function(){
3     modal.style.display = 'none';
4}

こちらのコードを追加してみればどうでしょうか？

ページリロード時にmodalを隠すというものです

投稿2020/06/07 23:07

ponppo

総合スコア62

whitehorse85921

2020/06/07 23:16

ponppoさん、ありがとうございます。追加してみたところページリロード時のモーダルは非表示になりましたが、ボタンを押したときモーダルが表示されなくなりました。

ponppo

2020/06/07 23:18

それだと、次はボタンをクリックしたときにmodalを表示する処理を追加するだけです

whitehorse85921

2020/06/07 23:36

すみません。私の手違いと勘違いで、ponppoさんの仰った通りにしたのですが、やはりページリロード時に一瞬だけモーダルが表示されてしまいます。これはCSSに問題があるのでしょうか？

ponppo

2020/06/07 23:40

んーリロード時に一瞬表示されるのは多いですからね。また解決策が見つかったら回答します

whitehorse85921

2020/06/07 23:58

ponppoさん、ありがとうございます。

ponppo

2020/06/08 07:31

https://teratail.com/questions/77302 参考になるかはわかりませんが

whitehorse85921

2020/06/08 11:35

ponppoさん、何度もありがとうございます。 display:none;にしてみると、CSSのkeyframesのアニメーションが消えてしまいます。また、display: none;にして、モーダルをJavaScriptでdisplay: block;にした時のふわっとしたアニメーションをどうつけたらいいか悩みます。また自分でも試行錯誤してみたいと思います。

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