CSS 如何制作全屏的 Twitter Bootstrap 模态框

在本文中，我们将介绍如何使用 CSS 来制作全屏的 Twitter Bootstrap 模态框。模态框是网页开发中常用的弹出窗口，可以用于显示更多信息、进行用户操作或显示警告。通过使模态框全屏，我们可以充分利用屏幕空间，提供更好的用户体验。

阅读更多：CSS 教程

1. 使用 Bootstrap 模态框

要制作全屏的 Bootstrap 模态框，首先需要使用 Bootstrap 框架。在 HTML 页面中引入 Bootstrap 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

然后，我们可以创建一个基本的 Bootstrap 模态框：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

这是一个基本的 Bootstrap 模态框，当点击“打开模态框”按钮时，模态框将弹出显示。接下来，我们将通过 CSS 将其制作为全屏模态框。

2. CSS 制作全屏模态框

要使模态框全屏，我们可以使用 CSS 来设置其高度和宽度，并对模态框的外观进行调整。

首先，在 CSS 文件中添加以下样式：

.modal-fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-dialog-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content-fullscreen {
  width: auto;
  height: auto;
  margin: 0;
}

.modal-header {
  background-color: #f1f1f1;
}

.modal-body {
  background-color: #ffffff;
}

.modal-footer {
  background-color: #f1f1f1;
}

这段 CSS 代码分别设置了全屏模态框、全屏模态框对话框和全屏模态框内容的样式。其中，.modal-dialog-fullscreen 用于使模态框居中显示。

接下来，在模态框的 HTML 代码中，将相关的 CSS 类应用到对应的元素上：

<div class="modal fade modal-fullscreen" id="myModal">
  <div class="modal-dialog modal-dialog-fullscreen">
    <div class="modal-content modal-content-fullscreen">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

将 .modal-fullscreen、.modal-dialog-fullscreen 和 .modal-content-fullscreen 类分别应用到对应的元素上，以实现全屏效果。

3. 示例说明

现在，我们可以通过点击按钮打开全屏模态框，并根据需要自定义模态框的内容。

<!DOCTYPE html>
<html>
<head>
  <title>全屏模态框示例</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .modal-fullscreen {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .modal-dialog-fullscreen {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .modal-content-fullscreen {
      width: auto;
      height: auto;
      margin: 0;
    }

    .modal-header {
      background-color: #f1f1f1;
    }

    .modal-body {
      background-color: #ffffff;
    }

    .modal-footer {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade modal-fullscreen" id="myModal">
  <div class="modal-dialog modal-dialog-fullscreen">
    <div class="modal-content modal-content-fullscreen">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

将以上代码保存为 HTML 文件，通过浏览器打开，即可看到一个可以全屏显示的 Bootstrap 模态框。