Bootstrap弹窗全解析

发布时间：2023-05-24

Bootstrap是目前比较流行的前端框架之一，它提供了丰富的组件，包括弹窗组件。在本文中，我们将全面解析Bootstrap弹窗，从使用依赖到常见的应用场景，让大家更好地掌握这个强大的组件。

一、Bootstrap弹窗依赖

在使用Bootstrap弹窗之前，需要先引入Bootstrap依赖。可以通过以下代码引入Bootstrap的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

这是Bootstrap 4.5.0的引用，如果需要使用其他版本，请根据实际情况修改链接地址。

二、Bootstrap弹窗登录

登录框是Bootstrap弹窗中最常见的应用场景之一。以下是一个简单的登录框示例：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
  登录
</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">登录</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username">用户名</label>
            <input type="email" class="form-control" id="username">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password">
          </div>
        </form>
      </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>

这里展示了一个简单的登录框，它由一个按钮和一个模态框组成。当用户点击按钮时，模态框会弹出，可以填写用户名和密码，并且点击确定后执行登录操作。

三、Bootstrap弹窗背景不变暗

Bootstrap弹窗默认背景会变暗，但有时我们想让页面保持明亮，只让弹窗背景变暗。可以通过修改代码实现这个效果：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </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>
<style>
  .modal-backdrop.show {
    opacity: 0.3 !important;
  }
</style>

.modal-backdrop 是Bootstrap弹窗背景的样式，通过更改 opacity 来控制背景透明度。这里我们将透明度调整到0.3，达到了只让弹窗背景变暗的效果。

四、Bootstrap弹窗表单

Bootstrap弹窗经常被用作表单，以下是一个简单的包含表单的示例：

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="formModalLabel">表单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="exampleInputUsername1">用户名</label>
            <input type="text" class="form-control" id="exampleInputUsername1" placeholder="请输入用户名">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
          </div>
          <div class="form-group">
            <label for="exampleInputCheckPassword1">确认密码</label>
            <input type="password" class="form-control" id="exampleInputCheckPassword1" placeholder="请再次输入密码">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">同意协议</label>
          </div>
        </form>
      </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>

这里展示了一个包含表单的模态框，可以通过表单填写相关字段内容，并且可以提交表单内容进行处理。

五、Bootstrap弹窗插件

Bootstrap弹窗还有许多插件可供使用，以下是一些常用的插件：

  • air-datepicker：一个强大的日期选择器
  • sweetalert2：一个美观强大的弹窗插件，支持多种类型的弹窗和动画效果
  • bootstrap-fileinput：一个美观易用的文件上传组件
  • bootstrap-select：一个可搜索的下拉框组件 这些插件的使用和安装可以参考其官方文档。

六、Bootstrap弹窗二维码

当需要在弹窗中显示二维码时，可以使用 jQuery-qrcode 插件来生成二维码，并将其插入到弹窗中。

<div class="modal fade" id="qrcodeModal" tabindex="-1" role="dialog" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="qrcodeModalLabel">二维码</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="qrcode"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
  $('#qrcodeModal').on('shown.bs.modal', function (e) {
    $('#qrcode').qrcode("http://www.baidu.com");
  });
</script>

这里展示了如何在模态框中使用 jQuery-qrcode 插件生成二维码。

七、Bootstrap弹出模态框

通过JavaScript代码弹出模态框可以使用以下代码：

$('#myModal').modal('show');

这里的 myModal 是模态框的ID，可以根据实际情况进行修改。

八、Bootstrap弹出页面窗口

当需要弹出一个新的页面窗口时，可以使用以下代码：

window.open('url', 'name', 'height=500, width=500');

这里的 url 是要打开的页面链接，name 是弹出的窗口的名称，可以根据实际情况进行修改，height 和 width 是弹出窗口的高度和宽度。

九、Bootstrap中文网

如果想要了解更多Bootstrap弹窗的使用方法和技巧，可以访问Bootstrap中文网，里面有详细的教程和文档：

十、Bootstrap提示框

除了弹窗，Bootstrap还提供了另一种提示组件——提示框。以下是一个简单的提示框示例：

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="这是一个提示框">
  鼠标移上来试试？
</button>

这里展示了一个简单的提示框，可以在鼠标移上按钮时弹出显示提示信息。通过修改 data-placement 属性，可以控制提示框的位置。

推荐文章