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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

1064閲覧

複数モーダル設置後にwindow.onclickでモーダルを閉じることができない

KKsall

総合スコア25

JavaScript

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2021/11/15 14:11

編集2021/11/15 14:17

複数モーダル設置後にwindow.onclickでモーダルを閉じたいのですが、forEachの書き方が悪いのか任意の画面を押下してもモーダルのactiveクラスがremoveしません。レクチャーいただければ幸いです。

デモ
https://codepen.io/boo-jp/pen/ZEJmOeG

const modalbtns = document.querySelectorAll("[data-target]"); const close_modals = document.querySelectorAll(".modalclose"); const modal = document.querySelectorAll('.has-background-modal'); modalbtns.forEach((btn) => { btn.addEventListener("click", () => { document.querySelector(btn.dataset.target).classList.add("active"); }); }); close_modals.forEach((btn) => { btn.addEventListener("click", () => { const modal = btn.closest(".has-background-modal"); modal.classList.remove("active"); }); }); /* window.onclick = function (event) { if (event.target == modal) modal.classList.remove("active"); } */ window.onclick = (event) => { if (event.target == modal) { forEach((modal) => modal.classList.remove("active")); } };
<div id="dashboard-modal" class="has-background-modal"> <div class="p-modal-content"> <div class="p-modal-header"> <span class="modalclose">&times;</span> <h2>廃止する</h2> </div> <div class="p-modal-body"> <div class="btns-group"> <button type="submit" class="c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block"><i class="btn-ph-caret-left ph-caret-left"></i>キャンセル</button> <button type="submit" class="genric-btn p-genric-btn--primary mt-small u-has-display-block">廃止する<i class="btn-ph-caret-right ph-caret-right"></i> </button> </div> </div> </div> </div> <div id="non-approved-modal" class="has-background-modal"> <div class="p-modal-content"> <div class="p-modal-header"> <span class="modalclose">&times;</span> <h2>非承認する</h2> </div> <div class="p-modal-body"> <div class="btns-group"> <button type="submit" class="c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block"><i class="btn-ph-caret-left ph-caret-left"></i>キャンセル</button> <button type="submit" class="genric-btn p-genric-btn--primary mt-small u-has-display-block">非承認する<i class="btn-ph-caret-right ph-caret-right"></i> </button> </div> </div> </div> </div> <div id="approved-modal" class="has-background-modal"> <div class="p-modal-content"> <div class="p-modal-header"> <span class="modalclose">&times;</span> <h2>承認する</h2> </div> <div class="p-modal-body"> <div class="btns-group"> <button type="submit" class="c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block"><i class="btn-ph-caret-left ph-caret-left"></i>キャンセル</button> <button type="submit" class="genric-btn p-genric-btn--primary mt-small u-has-display-block">承認する<i class="btn-ph-caret-right ph-caret-right"></i> </button> </div> </div> </div> </div>
.has-background-modal { position: fixed; top: 0; left: 0; z-index: 3; display: none; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, .5); } .p-modal-content { width: 75rem; margin: 10% auto; background: $color-white; border-radius: .5rem; animation-name: modalopen; animation-duration: var(--modal-duration); } .p-modal-header { position: relative; padding: 50px 0 30px; h2{ width: 67.7rem; padding: 0 3rem; margin: auto; @include font-size(16); font-weight: bold; } } .p-modal-body { padding: 20px; } .modalclose { position: absolute; top: .5rem; right: 2rem; color: var(--color-primary); @include font-size(30); } .modalclose:hover, .modalclose:focus { color: var(--color-primary); cursor: pointer; } .active { display: block; } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } } //message-modal .has-background-message-modal { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; overflow: auto; } .p-message-content{ /* width: 1286px; */ width: 1460px; height: 64px; margin: 5% 2.5% auto; @include border-radius(.5); &__body{ display: flex; align-items: center; justify-content: center; height: 100%; font-weight: bold; color: $color-white; @include font-size(18); } }

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

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

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

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

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

guest

回答1

0

ベストアンサー

if (event.target == modal) {

これ、trueになるんでしょうか。
modalはquerySelectorAllの結果なのでNodeListとなり、Event.targetはイベントが発生した特定の要素になるので、イコールにはなり得ないと思います。
.has-background-modalのクリックイベントを素直に拾った方が良さそうに思います。

投稿2021/11/15 22:37

m.ts10806

総合スコア80875

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問