サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
naomi-homma.hatenablog.com
今回は、自身のポートフォリオで実装している「複数のモーダルを設置する方法」を解説していきます。 モーダル一つだけというのはよく見かけますが、複数の場合の記事が少なかったので初心者の方でも実装できるように分かりやすく解説していきたいと思います。 また、今回はjQueryは使用しません。 なぜなら、私がJavaScriptの理解を深めたいからです笑 jQueryはとても便利なのですが、やはりベースとなるJavaScriptの理解は重要なので今回はvanilla JSで実装していきます。 処理の流れ・考え方 モーダル表示・非表示の基本的な考えは「classの切り替え」です。 簡単に流れをまとめると.... ①ページ読み込み時はモーダル自体が非表示になっている。 ②クリックイベントで表示用のクラスが付与されモーダルが画面に現れる。 ③「✖」をクリックするとクラスが外され非表示になる この「クラスの
このページを最初にブックマークしてみませんか?
『naomi-homma.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く