Bootstrap モダルダイアログを簡単にクローズできないようにしながら表示する

Bootstrapのモーダルダイアログを使った時に、下記のダイアログが閉じてしまアクションを防ぎます。
(ダイアログが閉じないようにします。)

• ダイアログの外側をクリックしてダイアログを閉じるアクション
• [ESC]ボタンをクリックしてダイアログを閉じるアクション

使用用途

使用用途があるのか疑問視されそうですが、超必須項目で強制的にダイアログを表示し、 何かを絶対に入力させたい時などを想定しています。

ソースコード

今回は仮に、shopというモデルを更新するような物を想定しており、 [閉じる]ボタン等も配置していません。

こんな感じのモーダルダイアログになります。

modal_daialog.html.slim

javascript:
  $(document).ready(function(){
    $('#shop_create_modal.modal').modal({backdrop: 'static', keyboard: false, show: true});
  });

#shop_create_modal.modal.fade tabindex="-1" role="dialog"
  .modal-dialog
    .modal-content
      .modal-header
        h4.modal-title
          | ショップ設定
      = form_for @current_shop, url: shops_path do |f|
        .modal-body

          .form-group
            = f.label :code
            = f.text_field :code, class: 'form-control'
          .form-group
            = f.label :name
            = f.text_field :name, class: 'form-control'

        .modal-footer
          = f.submit "登録", class: 'btn btn-default'

ポイント

大事なところは以下です。

$('#shop_create_modal.modal').modal({backdrop: 'static', keyboard: false, show: true});

backdrop

backdrop: 'static' でダイアログの外側をクリックでダイアログが閉じないようにしています。

keyboard

keyboard: falseで[ESC]ボタンクリックでダイアログが閉じないようしています。

関連記事

marketing-web.hatenablog.com

Bootstrap