bootstrap模态弹出框学习笔记(1-8 模态弹出框--为弹出框增加过度动画效果)
2016-01-04 10:52
627 查看
为模态弹出框增加过度动画效果:
可通过给“.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">×</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); }
相关文章推荐
- bootstrap模态弹出框学习笔记(1-7 模态弹出框--触发模态弹出窗2种方法)
- 详解Bootstrap四种图片样式
- 详解Bootstrap创建表单的三种格式(一)
- Bootstrap中的下拉菜单
- 详解Bootstrap创建表单的三种格式(一)
- 详解Bootstrap四种图片样式
- 详解Bootstrap按钮
- 详解Bootstrap glyphicons字体图标
- 详解Bootstrap的aria-label和aria-labelledby应用
- Bootstrap的aria-label和aria-labelledby
- 解决ckeditor在bootstrap中modal中弹框无法输入问题
- bootstrap+brite实现的html5的联系人增删改查入门教程
- Bootstrap字体图标(glyphicons)
- bootstrap实现弹窗和拖动效果
- bootstrap实现弹窗和拖动效果
- Bootstrap辅助类
- Bootstrap图片
- Bootstrap登录样式
- Bootstrap按钮
- Bootstrap组件On和Off语法