CSSでTwitter Bootstrap モーダルボディにスクロールバーを追加する方法

2024-05-27

Twitter Bootstrap でモーダルボディのみスクロールバーを追加する方法

必要なもの

Bootstrap 4.x またはそれ以上
基本的な CSS の知識

手順

モーダルダイアログの .modal-dialog クラスに .modal-dialog-scrollable クラスを追加します。

.modal-dialog {
  /* 既存のスタイル */
  
  max-height: 100%;
  overflow: auto;
}

必要に応じて、モーダルボディの .modal-body クラスにスタイルを追加します。

.modal-body {
  /* 既存のスタイル */
  
  max-height: 600px;
}

説明

.modal-dialog-scrollable クラスを追加すると、モーダルダイアログにスクロールバーが表示されます。 max-height プロパティを使用して、ダイアログの高さを制限することもできます。
.modal-body クラスにスタイルを追加すると、モーダルボディの高さを制限できます。これは、コンテンツが多い場合に役立ちます。

補足

Bootstrap 5 では、.modal-dialog クラスに .modal-dialog-scrollable クラスを追加するだけで、モーダルボディにスクロールバーが表示されます。
モーダルボディの高さ制限を調整することで、必要なだけコンテンツを表示できます。
必要に応じて、モーダルヘッダーやフッターのスタイルも調整できます。

Twitter Bootstrap でモーダルボディのみスクロールバーを追加するサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap モーダル スクロールバー</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCb1yis3T3N66A7sYXQzJ6F7AF9iWw9V5mQhLNqmQAXaKoP1Y7Qj6oIO2HM" crossorigin="anonymous">
</head>
<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">モーダルを開く</button>

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>ここに長いコンテンツを配置します。</p>
          <p>ここに長いコンテンツを配置します。</p>
          <p>ここに長いコンテンツを配置します。</p>
          <p>ここに長いコンテンツを配置します。</p>
          <p>ここに長いコンテンツを配置します。</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXsvmniqer/mZX/aGHRgF5PwlqblRxvi+GI5sJT7plznRCRWtZn/qQ1P1oMy55" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9pIGZnQP6r2cVN1pYzE325aQqT8nJc9vZ4MYaXZiF7kC9oAF1zI16tQogx+ML9w" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvQV7gYICL4qVEzUe607nj7oFzYA9rQMDIICRCQICgLBLQ60xBLy8Y55yCqZqY" crossorigin="anonymous"></script>
</body>
</html>

CSS

.modal-dialog {
  /* 既存のスタイル */
  
  max-height: 100%;
  overflow: auto;
}

.modal-body {
  /* 既存のスタイル */
  
  max-height: 600px;
}

このコードは、Bootstrap 4.x を使用してモーダルにスクロールバーを追加する例です。

HTML コードでは、モーダルダイアログに .modal-dialog-scrollable クラスを追加しています。これは、モーダルダイアログにスクロールバーを表示します。
CSS コードでは、モーダルボディの高さ制限を 600px に設定しています。これは、コンテンツが多い場合に役立ちます。

Bootstrap 5 では、.modal-dialog-scrollable クラスを追加

Twitter Bootstrap でモーダルボディのみスクロールバーを追加する他の方法

.modal-dialog {
  /* 既存のスタイル */
  
  overflow-y: auto;
}

方法 2: モーダルボディに max-height と overflow-y: auto を設定する

.modal-body {
  /* 既存のスタイル */
  
  max-height: 600px;
  overflow-y: auto;
}

方法 3: カスタム CSS を使用してモーダル全体をスクロールバー付きのコンテナーにする

.modal {
  overflow: auto;
  max-height: 100vh; /* 100% のビューポート高さを設定 */
}

.modal-dialog {
  /* 既存のスタイル */
  
  max-width: 90%; /* モーダルダイアログの最大幅 */
  margin: 0 auto;
}

.modal-content {
  /* 既存のスタイル */
  
  overflow-y: auto; /* モーダルコンテンツにスクロールバーを追加 */
  max-height: 100%; /* モーダルコンテンツの最大高さを 100% に設定 */
}