株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | 動きのあるページ制作5「モーダル表示」

2018.6.18

CATEGORY - web

今回も、よく見る系の動きシリーズ!って感じで(笑)
「モーダル表示」(ポップアップって言ったほうがわかりやすいかも。)を実装していきます。

モーダル表示の仕組み

まず、完成図から。

サイトでよく見るやつなんで、「ああ、これか。」って感じだと思います^^

「モーダル表示」で作成する完成版のファイルはこちらからダウンロードできます↓↓

アコーディオン 完成版ファイル

 

では、いつもどおり、実装においての考え方をみていきましょう。

1. モーダルのDOMを作成し、初期表示は非表示にしておく(※今回は。)
2. トリガーとなるDOMにクラスを指定して、クリックしたらモーダルを表示する
3. モーダルの「閉じるボタン」をクリックしたら、モーダルを非表示にする

って感じです。

前々回やった、アコーディオンの実装と基本的には一緒なので、簡単ですね^^

モーダルのDOMを作成し、初期表示は非表示にしておく

では、最初に、モーダル部分のDOMを実装していきます。

<div class="modal js-modal">
  <div class="modal-dialog">
    <div class="modal-inner">
      <div class="modal-image-block">
        <img src="assets/images/chara/chara_1.png" alt="一ノ瀬麻衣">
      </div>
      <div class="modal-content-block">
        <div class="chara-info-block">
          <p class="chara-name">
            一ノ瀬麻衣
          </p>
          <p class="chara-text">
            年齢:20
          </p>
          <p class="chara-text">
            身長:160cm
          </p>
          <p class="chara-text">
            体重:48kg
          </p>
          <p class="chara-text">
            プロフィール<br>
            幼なじみでいつも一緒に遊んでいた女の子。
          </p>
        </div>
      </div>
    </div>

    <div class="modal-close js-modal-close-trigger">
      <img src="assets/images/common/icon_modal_close.png" alt="閉じる" width="40">
    </div>
  </div>
</div>

“modal” クラスは、モーダルの下の半透明のグレー部分になります。
モーダル本体は、”modal-dialog” クラスのDOMになります。

モーダルのDOMには、”js-modal” のクラスを、
閉じるボタンのDOMには、”js-modal-close-trigger” のクラスをつけておきます。

はい、では次に、CSS。
(※モーダルの中身は割愛してますので、実際のファイルを見て見てください。)

まずは、画面全体を覆うグレーの背景部分から。

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  visibility: visible;
  opacity: 1;
}

position:fixed で、幅と高さを100%にすることで、画面全体を覆うようにしてます。
初期表示は、非表示なので、display:none にしたいのですが、そうすると、opacityのtransitionが効かないので、visibility: hidden; opacity:0; にして、表示の際にtransitionが効くようにしました。
で、”is-open” のクラスがついたときには、visibility:visible; opacity:1; にしてます。

トリガーとなるDOMにクラスを指定して、クリックしたらモーダルを表示する

では次にトリガーとなるDOMをみていきます。
今回は、「一ノ瀬麻衣」の顔画像をクリックしたらモーダルを表示させたいので、このDOMに “js-modal-open-trigger” のクラスをつけました。

で、JS。

トリガーをクリックしたら、モーダルに “is-open” のクラスを付けて、表示すればいいだけです。
簡単ですね^^

// Modal
var $modal = $('.js-modal');
var $modalOpenTrigger = $('.js-modal-open-trigger');

// モーダルを開く
$modalOpenTrigger.on('click', function(){
  $modal.addClass('is-open');
});

モーダルの「閉じるボタン」をクリックしたら、モーダルを非表示にする

最後に、閉じるボタンでモーダルを閉じる処理です。
HTMLの部分で、すでに閉じるボタンに “js-modal-close-trigger” をつけているので、これをクリックしたら、モーダルから “is-open”のクラスを削除して、モーダルを非表示にすればいいだけです。

// モーダルを閉じる
  $modalCloseTrigger.on('click', function(e){
  $modal.removeClass('is-open');
});

とまあ、こんな感じです。。

今回、特に新しいことでてきてないので、簡単ですね^^

ちなみに、今回、モーダル1つだけ実装しましたが、同じことを、他のキャラクターにも同様に実装していくだけです。

ただ、同じものを書いていくのがだるいので、次回は、underscore.jsのテンプレートという機能を用いてモーダルを実装してみたいと思います!

今回のポイント

  1. 特にないですw こんな感じでモーダルを実装しますw

 

WEBサイト制作講座 | HTML基礎 その1

WEBサイト制作講座 | HTML基礎 その2

WEBサイト制作講座 | HTML基礎 その3

WEBサイト制作講座 | HTML基礎 その4

WEBサイト制作講座 | CSS基礎 その1

WEBサイト制作講座 | CSS基礎 その2

WEBサイト制作講座 | CSS基礎 その3

WEBサイト制作講座 | JavaScript基礎

WEBサイト制作講座 | 動きのあるページ制作1「にゅるっとメニュー」

WEBサイト制作講座 | 動きのあるページ制作2「TOPへ戻る・アンカーのスクロール」

WEBサイト制作講座 | 動きのあるページ制作3「アコーディオン」

WEBサイト制作講座 | 動きのあるページ制作4「CSS キーフレームアニメーション」

WEBサイト制作講座 | 動きのあるページ制作5「モーダル表示」

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP