Bootstrap实现带动画过渡的弹出框

要实现带动画过渡的弹出框效果，可以使用Bootstrap中提供的Modal组件，该组件是一个可重复使用的弹窗模态框，支持多种功能和样式扩展。

下面是具体实现步骤：

步骤1- 引入Bootstrap库文件

在HTML文件中，通过以下代码引入Bootstrap的CSS和JavaScript库文件：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

引入的文件包含了Bootstrap的核心样式和JavaScript插件。

步骤2- 创建Modal弹出框

在HTML文件中，创建一个Modal弹出框：

<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-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">
        Modal content goes here.
      </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>

上述代码中，Modal组件中包含了Modal标题和主要内容，在footer部分还包含了两个按钮用于关闭和保存。

步骤3- 触发Modal弹出框

创建一个按钮，触发Modal弹出框的显示：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

上述代码中，按钮具有data-toggle="modal"和data-target="#myModal"属性，它表示该按钮将触发弹出框，并指定要弹出的弹框的id为“myModal”。

步骤4-添加动画效果

实现动画效果需要添加CSS样式，例如，添加下面的样式：

.fade {
  opacity: 0;
  transition: opacity .15s linear;
}

.fade.in {
  opacity: 1;
}

.modal.fade .modal-dialog {
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
  transform: translateY(-25%);
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}

.modal.open .modal-dialog {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out,-webkit-transform .3s ease-out;
}

上述代码中，.modal.fade .modal-dialog和.modal.open .modal-dialog用于控制打开和关闭时的弹窗效果，使用transition属性来控制变换的时间和速度。

完成了上述步骤后，就可以在网页中实现带动画过渡的弹出框效果了。

以下是两个示例：

示例1- 自动打开模态框

在页面加载时自动打开模态框：

<body onload="$('#myModal').modal('show')">
  ...
</body>

示例2- 点击按钮后弹出模态框，且模态框显示完毕后执行回调函数

在模态框弹出显示之后，执行回调函数：

$('#myModal').on('shown.bs.modal', function (e) {
  console.log('Model shown.');
})

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap实现带动画过渡的弹出框 - Python技术站