質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2421閲覧

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

whitehorse85921

総合スコア34

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/06/07 15:28

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

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

試したこと
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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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さん、ありがとうございます。
whitehorse85921

2020/06/08 11:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問