Bootstrap弹窗全解析

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提示框

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

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

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

原创文章，作者：HRXWK，如若转载，请注明出处：https://www.506064.com/n/372330.html