bootstrap模态弹出框学习笔记（1-8 模态弹出框--为弹出框增加过度动画效果）

最新推荐文章于 2024-12-07 13:59:15 发布

hellochenlu

最新推荐文章于 2024-12-07 13:59:15 发布

阅读量3.4k

点赞数

分类专栏： Bootstrap-js

Bootstrap-js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何通过在Bootstrap中添加特定的CSS类来为模态框实现过渡动画效果。通过给模态框添加fade类，可以创建平滑的显示和隐藏动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为模态弹出框增加过度动画效果：

可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

源代码实现：

/*bootstrap.css文件第5390行～第5402行*/
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate3d(0, -25%, 0);
       -o-transform: translate3d(0, -25%, 0);
          transform: translate3d(0, -25%, 0);
}

.modal.in .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0);
       -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}