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

来源：互联网发布：免费淘宝页面制作编辑：程序博客网时间：2024/05/16 11:13

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

可通过给“.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);}

0 0