Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What is going on with this article?
@magic_xyz

Javascript から Bootstrap Modal を操作する

More than 5 years have passed since last update.

概要

Javascript で警告や確認を表示するときによく使う Bootstrap Modal
公式マニュアルを見れば分かる通り、bootstrap.js を読みこめば、あとは htmlの記述だけでモーダルの開閉ができる
が、SPAなどではモーダルの開閉を Javascript 側で操作したいことが稀によくある
なので、その手順を備忘録的に残しておく

前置き

今回のサンプルは以下の環境で作成しているため、他の環境で使う場合は適当に書き換えてください

  • Typescript
  • KnockoutJS

html の作成

ここは特別なことはなく、公式マニュアルを参考にモーダルを作成する
ただし、モーダルの開閉を行うところは Javascript の関数を呼ぶようにしておく

<div class="container">
  <button type="button" class="btn btn-primary" data-bind="click: open">
    開く
  </button>
</div>

<div id="icesword" class="modal fade">
  <div class="modal-dialog modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        <i class="glyphicon glyphicon-remove"></i>
      </button>
      <h4 class="modal-title">
        ガラハド
      </h4>
    </div>
    <div class="modal-body">
      ねんがんの アイスソードをてにいれたぞ! 
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal">
        そう かんけいないね
      </button>
      <button class="btn btn-danger" data-bind="click: close">
        殺してでも うばいとる
      </button>
      <button class="btn btn-default" data-dismiss="modal">
        ゆずってくれ たのむ!!
      </button>
    </div>
  </div>
</div>

open 関数の作成

こちらも特に特別なことはない
bootstrap-modal の関数を呼び出せば、モーダルが表示される

public open(): void {
  $('#icesword').modal();
};

表示されると、以下のようになる

2016-03-05_17h35_22.png

close 関数の作成

問題は閉じるとき
関数は以下のようになる

public close(): void {
  console.log("な なにをする きさまらー!");
  $('body').removeClass('modal-open'); // 1
  $('.modal-backdrop').remove();       // 2
  $('#icesword').modal('hide');        // 3
}

解説

まず1について
これはモーダル表示時に body に自動的に付与されるクラスを削除する
このクラスがついたままだと、 画面スクロールが効かなくなる

2について
これはモーダルの背景(黒い部分)を削除する処理
この処理を行わないとモーダルは消えても、背景が残ったままになり、 クリックが効かないままになる

そして最後の3でモーダル自体を閉じている

47
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
47
Help us understand the problem. What is going on with this article?