Technology ホームページ作成

[jQuery]ポップアップで出てくるメニュー、「モーダル」を作成する

2021-01-22

モーダルを作成してみたので、手順を整理する。

完成形はこちら。


jQueryの下準備

jQueryを読み込むための準備は別途下記にて整理した。

[jQuery] jQueryを使う際の下準備

jQueryを使う時に必要な下準備を整理する。


モーダルを準備する

まずは表示するためのモーダルを準備する。

<div class="modal-wrapper">
        <div class="modal-menu">
            <ul>
              <li>menu1</li>
              <li>menu2</li>
              <li>menu3</li>
            </ul>
        </div>
    </div>


CSSでwrapper部分にz-indexをつけることで、他の要素より上に表示させる。


.modal-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.modal-menu{
  color:white;
  height:900px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

.modal-menu li{
  list-style: none;
  font-size:30px;
}


下記表示結果。モーダルの下の背景要素のHTML・CSSは今回省略している。


モーダルの表示が確認できたら、wrapper部分にdisplay:none;を記述して、一時モーダルを表示しないようにさせる。

.modal-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display:none;
}


clickイベントを作成して、クリックした時にモーダルを表示

次にメニューボタンを準備し、jQueryでclickイベントを作る。


ヘッダーとメニューボタン用意

まずはヘッダーとメニューボタン用意

fontawesomeを今回は使用した。

<!--fontawesomeをhead部分で読み込む >
 
<header>
   <i class="fas fa-bars fa-2x"></i>
 </header>



clickイベントを用意する

clickイベントをscript.jsにて用意する。

まずはHTMLにて、ボタンアイコン部分に「id="menu-show"」を設定し、script.jsのクリックイベントでidを指定できるようにする。

<header>
   <i class="fas fa-bars fa-2x" id="menu-show"></i>
 </header>
 <body>
   <div class="modal-wrapper">
        <div class="modal-menu">
            <ul>
              <li>menu1</li>
              <li>menu2</li>
              <li>menu3</li>
            </ul>
        </div>
    </div>


次はscript.jsの記述。

「#menu-show」がクリックされた時に、「.modal-wrapper」がフェードインする、という形で記述する。

$(function() {
  $('#menu-show').click(function(){
    $('.modal-wrapper').fadeIn();
  });
});


すると、クリックした時に、モーダルが表示される。

ただし現段階では、モーダルが表示されるだけで、また隠すことができないので、今度は隠す処理を記述する。


モーダルを隠す

次はモーダルを隠す処理に入る。


×アイコンを表示

戻るアイコンだとわかりやすくするため、別アイコンをfont-awesomeで読み込む。

アイコンは、modal-wrapperの中に入れる。

今回はわかりやすく、リストに入れた。

script.jsでアイコンにclickイベントをつけれるように、「id="menu-close"」も追加。

<div class="modal-wrapper">
        <div>
        </div>
        <div class="modal-menu">
            <ul>
              <li id="menu-close"><i class="fas fa-window-close"></i></li>
              <li>menu1</li>
              <li>menu2</li>
              <li>menu3</li>
            </ul>
        </div>
    </div>


script.jsでは先程のfadeIn()のクリックイベントに加え、fadeOut()のクリックイベントも追加。

「#menu-close」がクリックされた時に、「.modal-wrapper」がフェードインする、という形で記述する。

$(function() {
  $('#menu-show').click(function(){
    $('.modal-wrapper').fadeIn();
  });

  $('#menu-close').click(function(){
    $('.modal-wrapper').fadeOut();
  });
});


完成。

-Technology, ホームページ作成