Bootstrap Modal 从左侧和右侧滑入
来源:互联网 发布:世界编程语言排名 编辑:程序博客网 时间:2024/06/13 18:38
在web开发中,添加、修改操作,用modal弹出层是一种不错的选择。
但是modal弹出层,默认动画效果从顶端滑入。个人觉的从左侧或右侧滑入也是一种不错的选择。
展示效果如下:
红色标注部分为右侧划入部分,当然也可以左侧划入
右侧划入代码,class="modal right fade" ,而左侧划入只需要修改为modal="modal left fade"即可
html代码
<!--css样式--><style type="text/css">.mybtn{position:fixed; right:10px; bottom:20px; display:block; width:50px; height:50px;border-radius:50px; padding:0px; text-align:center; line-height:50px;}.modal.left .modal-dialog,.modal.right .modal-dialog {position: fixed;margin: auto;width: 320px;height: 100%;-webkit-transform: translate3d(0%, 0, 0);-ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0);transform: translate3d(0%, 0, 0);}.modal.left .modal-content,.modal.right .modal-content {height: 100%;overflow-y: auto;}.modal.left .modal-body,.modal.right .modal-body {padding: 15px 15px 80px;}/*Left*/.modal.left.fade .modal-dialog{left: -320px;-webkit-transition: opacity 0.3s linear, left 0.3s ease-out; -moz-transition: opacity 0.3s linear, left 0.3s ease-out; -o-transition: opacity 0.3s linear, left 0.3s ease-out;transition: opacity 0.3s linear, left 0.3s ease-out;}.modal.left.fade.in .modal-dialog{left: 0;}/*Right*/.modal.right.fade .modal-dialog {right: -320px;-webkit-transition: opacity 0.3s linear, right 0.3s ease-out; -moz-transition: opacity 0.3s linear, right 0.3s ease-out; -o-transition: opacity 0.3s linear, right 0.3s ease-out;transition: opacity 0.3s linear, right 0.3s ease-out;}.modal.right.fade.in .modal-dialog {right: 0;}/* ----- MODAL STYLE ----- */.modal-content {border-radius: 0;border: none;}.modal-header {border-bottom-color: #EEEEEE;background-color: #FAFAFA;}</style><!--点击右侧弹出--><a href="javascript:;" class="btn btn-danger mybtn" data-toggle="modal" data-target="#myModal"><i class="fa fa-user"></i><span>客户</span></a><!-- 弹出层 modal --> <div class="modal right 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"> <h4 class="modal-title" id="myModalLabel">客户管理</h4> </div> <div class="modal-body"> 内容部分 </div> </div> </div> </div><!-- end 弹出层 moda -->
2 0
- Bootstrap Modal 从左侧和右侧滑入
- bootstrap页面左侧导航栏 右侧网页
- 表单特效-点击左侧选项选入右侧选择框
- 实现页面从右往左侧滑入效果
- bootstrap如何实现左侧导航栏,右侧网页
- appframework 左侧和右侧点击滑动显示
- 安卓切换界面从顶部滑入,右侧滑入
- DrawerLayout 左侧 右侧 点击 侧滑菜单
- Bootstrap modal
- Bootstrap-Modal
- BootStrap Modal
- bootstrap modal
- modal (Bootstrap)
- appframework的左侧和右侧的api接口
- PopupWindow实现右侧、左侧和底部弹出菜单
- PopupWindow实现右侧、左侧和底部弹出菜单
- PopupWindow实现右侧、左侧和底部弹出菜单
- PopupWindow实现右侧、左侧和底部弹出菜单
- 欢迎使用CSDN-markdown编辑器
- IOS PJSIP源码编译
- 个人收集的一些前端的网站
- 《手把手教你学C语言》学习笔记(2)---学习C语言的目标和方法
- 野指针问题
- Bootstrap Modal 从左侧和右侧滑入
- 阿里巴巴测试题 -- 取石子问题
- 数据压缩实验三 Huffman编解码算法实现与压缩效率分析
- Java中String、StringBuffer、StringBuilder的联系和区别
- Android -- RecyclerView(超简单)实现可展开列表
- FFmpeg总结(七)AV系列结构体之AVIOContext
- Vector:动态数组的使用和说明
- CCF NOI1035 数根
- 【IMMVWeb训练营作业】自定义select组件