Bootstrap Modal 从左侧和右侧滑入
在web开发中,添加、修改操作,用modal弹出层是一种不错的选择。
但是modal弹出层,默认动画效果从顶端滑入,从左侧或右侧滑入也是一种不错的选择。
展示效果如下:
右侧划入代码,class="modal right fade"
左侧划入代码,class="modal left fade"
JS显示或隐藏modal:
//显示
$('#myModal').modal('show')//隐藏
$('#myModal').modal('hide')
html代码
<!--css样式--><style type="text/css">.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}.modal.left.fade .modal-dialog{left:-320px;-webkit-transition:opacity .3s linear,left .3s ease-out;-moz-transition:opacity .3s linear,left .3s ease-out;-o-transition:opacity .3s linear,left .3s ease-out;transition:opacity .3s linear,left .3s ease-out}.modal.left.fade.in .modal-dialog{left:0}.modal.right.fade .modal-dialog{right:-320px;-webkit-transition:opacity .3s linear,right .3s ease-out;-moz-transition:opacity .3s linear,right .3s ease-out;-o-transition:opacity .3s linear,right .3s ease-out;transition:opacity .3s linear,right .3s ease-out}.modal.right.fade.in .modal-dialog{right:0}.modal-content{border-radius:0;border:none}.modal-header{border-bottom-color:#eee;background-color:#fafafa}</style><!--点击右侧弹出--><a href="javascript:;" class="btn btn-danger mybtn" data-toggle="modal" data-target="#myModal"><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"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">弹窗标题</h4></div><div class="modal-body">弹窗内容 </div></div></div></div><!-- end 弹出层 moda -->
感谢您的支持,写的文章如对您有所帮助,开源不易,请您打赏,谢谢啦~
Bootstrap Modal 从左侧和右侧滑入相关推荐
- css 页面从左侧向右滑入,动画只执行一次
简单实现了页面进入时的动画: (1)从左侧滑入: (2)只执行一次. <template><div class="big_screen_contant">& ...
- CSS div从左侧、上侧滑入效果代码实例
滑入的方向更改translate3d里面的参数即可(left.....) <!doctype html> <html> <head> <meta charse ...
- 【JS动态效果】如何jquery实现div右侧滑入滑出的效果
二话不多说,先看效果哈,这样才能吸引你那双有故事的双眸: 下面就针对这个效果我们做一个核心技术的介绍: 首先我们用到的核心知识点为:jquery的animate函数,其中滑出来和滑进去的缓慢效果是利用 ...
- 基于jQuery点击缩略图右侧滑出大图特效
基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <di ...
- bootstrapdatetimepicker 隐藏触发 bootstrap modal隐藏事件
如果在bootstrap modal 里面使用 bootstrapdatetimepicker ,并且写一个modal的隐藏方法清空所有文本. 那么当你选择日期之后会发现modal框里所有的文本框的值 ...
- centerandzoom 无效_在bootstrap modal 中加载百度地图的信息窗口失效解决方法
这个问题其实很傻,解决方法没有任何技术含量,只是记录下工作中发生的事. 前阵子给一个汽车集团客户做了一个经销商查询系统,其中一个功能是使用地图标注经销商店面地址,并且实现导航功能. 页面演示地址:ht ...
- 修改bootstrap modal模态框的宽度
修改bootstrap modal模态框的宽度 修改的不是modal这个大div 而是modal-dialog这个会话div <div class="modal fade" ...
- 如何使用Bootstrap Modal和jQuery AJAX创建登录功能
by Yogi 由瑜伽士 Bootstrap Modal is an excellent way to create a Login form on your website. In this tut ...
- Bootstrap modal使用及点击外部不消失的解决方法
这篇文章主要为大家详细介绍了Bootstrap modal使用及点击外部不消失的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了Bootstrap modal使用及点击 ...
最新文章
- mysql int char连接_MySQL中int、char以及varchar的性能比较
- SQL server 2016 安装步骤
- (十四)Java springcloud B2B2C o2o多用户商城 springcloud架构- Spring Cloud构建分布式电子商务平台...
- 微软公司部署小型数据中心网络连接产品
- c语言数字字体的格式,c语言—— 格式控制符—— 数据类型——相对应的字节数...
- SearchParams(URL获取参数)
- java大致了解_学习Java第一天,大致了解
- python自学行吗-python能够自学吗
- .Net转Java自学之路—基础巩固篇三十(JDBC)
- MySQL数据库入门学习
- android实现简单进度条ProgressBar
- cmos和ttl_TTL和CMOS有什么区别?
- Mac电脑使用svn下载版本
- 微信小程序地图点击设置范围并创建区域蒙层
- Maven整合SSM项目(七)
- LiveData 机制详解
- U3D AudioSource 完整音效截取部分
- pthread-win32库编译及使用方法注意事项
- 微信小程序 | 基于ChatGPT实现电影推荐小程序
- opencv-python 去除图片文字