Javascript から Bootstrap Modal を操作する

概要

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();
};

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

close 関数の作成

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

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

解説

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

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

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