JavaScript
Bootstrap

Javascript から Bootstrap Modal を操作する

More than 3 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でモーダル自体を閉じている