［Bulma］モーダルウィンドウを実装する

f:id:jyouj:20181201153111p:plain

Bulmaフレームワークを使ってモーダルウィンドウを実装してみたいと思います。ただ、Bulmaは純粋なCSS フレームワークのため、JavaScriptを使わなくてはなりません。

このサイトを参考に、自分に必要なところを付け足しました。

hawksnowlog.blogspot.com

Bulmaでモーダルウィンドウのレイアウト

<div>
  <div>
    <center>
      <button class="button is-large" id="open">表示</button>
    </center>
  </div>

  <div class="modal">
    <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">モーダルウィンドウ</p>
          <button class="delete" aria-label="close" id="close"></button>
        </header>
        <section class="modal-card-body">
          <p class="image is-3by2">
            <img src="<画像URL>" alt="">
          </p>
          コンテンツ欄
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success"><a href=#>リンク</a></button>
        </footer>
      </div>
    </div>
  </div>
</div>

ボタンを押したらモーダルウィンドウが表示されるようになってます。まだJavaScriptを入れてないので、最初から表示されていると思います。画像などもモーダルウィンドウで表示されるようにしました。実際に「ガチャっとニュース −ニュースをガチャっとランダムに！」で取り入れてます。

jQueryで動作をつける

実際にボタンを押したら、モーダルウィンドウが表示されたり、バツボタンや背景をタップしたら、閉じるようにしましょう。

まず、jQueryを導入します。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

そして動きを作っていきます。

<script>
  $(document).ready(function() {
    $("#open").on("click", function() {
      $("div.modal").addClass("is-active");
    })

    $("#close, div.modal-background").on("click", function() {
      $("div.modal").removeClass("is-active");
    })
  });
</script>