【徹底解説】Bootstrapモーダル：背景クリックを無効にして閉じられないようにする方法

Bootstrapモーダル：背景クリックによる閉じ無効化

Bootstrapのモーダルウィンドウは、デフォルトで背景（backdrop）をクリックすると閉じることができます。しかし、特定の状況では、この動作を無効化したい場合があります。

この解説では、JavaScript、CSS、およびTwitter Bootstrapを使用して、Bootstrapモーダルウィンドウの背景クリックによる閉じを無効にする方法について、分かりやすく説明します。

方法

以下の2つの方法があります。

JavaScriptを使用する

1 backdrop オプション

モーダルウィンドウの backdrop オプションを static に設定することで、背景クリックによる閉じを無効化できます。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('#myModal').modal({backdrop: 'static'});
});
</script>

2 stopPropagation() メソッド

モーダルウィンドウの click イベントに stopPropagation() メソッドを追加することで、背景クリックによるイベント伝播を阻止し、閉じを防ぐことができます。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  });

  $('.modal-backdrop').click(function(e) {
    e.stopPropagation();
  });
});
</script>

CSSを使用する

1 pointer-events プロパティ

モーダルウィンドウの backdrop 要素の pointer-events プロパティを none に設定することで、背景クリックに対するイベント処理を無効化できます。

.modal-backdrop {
  pointer-events: none;
}

注意点

上記の方法を使用する際には、以下の点に注意が必要です。

• ユーザーは、モーダルウィンドウ内の閉じるボタンまたはキーボード操作を使用してのみ、モーダルウィンドウを閉じることができます。
• モーダルウィンドウの背景をクリックしても、モーダルウィンドウが閉じないことをユーザーに明示的に伝える必要があります。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 1. `backdrop` オプション
  // $('#myModal').modal({backdrop: 'static'});

  // 2. `stopPropagation()` メソッド
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false
  });

  $('.modal-backdrop').click(function(e) {
    e.stopPropagation();
  });
});
</script>

CSS

.modal-backdrop {
  pointer-events: none;
}

上記コードを実行すると、以下の動作を確認できます。

• モーダルウィンドウが表示されます。
• モーダルウィンドウの背景をクリックしても、モーダルウィンドウは閉じません。
• モーダルウィンドウを閉じるには、以下のいずれかの操作が必要です。
  • モーダルウィンドウ内の閉じるボタンをクリックする。
  • Esc キーを押す。

サンプルコードの利用方法

上記サンプルコードをコピーして、HTMLファイルとJavaScriptファイルに保存します。その後、ブラウザでHTMLファイルを開くと、モーダルウィンドウが表示されます。

補足

上記サンプルコードは、基本的な方法を示しています。必要に応じて、コードをカスタマイズして、さまざまな動作を実現することができます。

背景クリックによるモーダル閉じ無効化のその他の方法

data-backdrop 属性

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  ...
</div>

modal-backdrop 要素の削除

$(document).ready(function() {
  $('#myModal').modal({
    backdrop: 'static'
  });

  $('.modal-backdrop').remove();
});

イベントリスナーの追加

document オブジェクトに click イベントリスナーを追加し、モーダルウィンドウの背景要素以外をクリックした時にモーダルウィンドウを閉じるようにすることができます。

$(document).ready(function() {
  $('#myModal').modal({
    backdrop: 'static'
  });

  $(document).on('click', function(e) {
    if (!$(e.target).closest('.modal').length) {
      $('#myModal').modal('hide');
    }
  });
});

ライブラリの使用

モーダルウィンドウの操作を拡張するライブラリを使用する方法もあります。

これらのライブラリを使用することで、より簡単に背景クリックによる閉じを無効化したり、その他の高度な機能を実現することができます。