bulma でモーダルを制御してみる

• 概要
• 環境
• モーダルを表示するボタンの作成
• モーダル用の div タグを作成
• ボタンを押した際の処理を実装
• 動作確認
• 最後に
• 参考サイト

概要

bulma にはモーダルを表示するための機能があります
https://bulma.io/documentation/components/modal/

今回はそれを使ってみました
説明のベースとなるアプリは過去に紹介した Sinatra アプリになります
必要な部分のコードのみ紹介します
ただ、今回紹介するコードでは Sinatra アプリ側のコードは一切登場しないので Sinatra 環境がなくても全く問題ありません

環境

• macOS 10.13.2
• Ruby 2.4.1p111
• sinatra 2.0.1
• bulma 0.6.2
• jQuery 3.3.1

モーダルを表示するボタンの作成

id 属性を使ってボタンを特定できるようにします

<a class="button is-small is-primary" id="show_action">Show</a></td>

モーダル用の div タグを作成

HTML 内のどこでもいいのでモーダル表示用の div タグを追記しましょう
今回は body タグの直前に記載しました

... 省略

  <div class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
      <div class="notification is-danger">
        This area has danger messages.
      </div>
    </div>
  <button class="modal-close is-large" aria-label="close"></button>
  </div>
  <script async type="text/javascript" src="../js/bulma.js"></script>
  <script async type="text/javascript" src="../js/form.js"></script>
</body>
</html>

表示する内容は bulma の notification を使っています
ここの内容は何でも OK なので好きなものを設置してください

ボタンを押した際の処理を実装

jQuery を使っています
ポイントはボタンを押した際に先ほどの div タグの modal クラスに is-active というクラスを追加してあげる点です

$("#show_action").on("click", function() {
  $("div.modal").addClass("is-active");
})

$('div.modal-background,button.modal-close').on('click', function() {
  $("div.modal").removeClass("is-active");
})

またモーダルが表示されたあとに画面をクリックしたらモーダルが消える処理も追加しています
モーダルを消すのは単純に追加した is-active クラスを削除するだけで OK です

動作確認

では動作確認してみましょう
今回であれば以下のように動作すれば OK です

最後に

bulma のモーダル機能を使ってみました
JavaScript を使って表示/非表示を制御する必要はありますが簡単に使えると思います

参考サイト

• https://stackoverflow.com/questions/43924655/how-can-i-prevent-a-modal-using-the-bulma-css-framework-from-closing-if-the-us?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa