【開発】bootstrapでモーダルの表示・非表示に使えるちょっとした小ワザ

自分たちのwebアプリケーションにbootstrapを導入していることは少なくないでしょう。僕が在籍している会社でもbootstrapを重宝しています。

一方で、実はbootstrapの機能のほんの一部しか使えていないという人も多いのではないでしょうか。僕もそのうちの一人で、現在進行形でbootstrapの機能を日々学んでいってます。

そんなbootstrapの機能を使っていた時に、モーダルの表示・非表示がうまくいかなかったことがありました。その時に試してみていい感じに動いた小ワザを、今回は共有したいと思います。

モーダルを非表示にした時に背景の黒も消えるようにする

モーダルを表示した時に背景が透明な黒になるのですが、そのモーダルを非表示にするときに背景が消えない時がありました。そのコードがこちら。

$('#hoge-modal').hide();

これを以下のように変えるといい感じに動きます。

$('#hoge-modal').modal('hide');

モーダルの背景をクリックできないようにする

モーダルの背景をクリックできないようにしたい。そんな時はbackdropを使うと便利です。

変更前

$('#hoge-modal').show();

変更後

$('#hoge-modal').modal({
  show: true,
  backdrop: 'static'
});

以上、bootstrapでモーダル表示・非表示をするときに使える小ワザを紹介しました。モーダルがうまく表示・非表示できない場合、もしくは自分の求めている挙動にならない場合は参考にしてみてください。

それではまた。