bootstrap-js(1)模态框
1.禁止动画效果
如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。一般还是不要去动这个,最多自己换个类名在写其他样式,不然你会头大的。
- <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
- ...
- </div>
2.参数
可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性,需要将参数名称放到 data- 之后,例如 data-backdrop=""。
参数名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
backdrop | boolean 或 string 'static' 默认值:true |
data-backdrop | 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。 |
keyboard | boolean 默认值:true |
data-keyboard | 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。 |
show | boolean 默认值:true |
data-show | 当初始化时显示模态框。 |
remote | path 默认值:false |
data-remote | 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。如下面的实例所示:
|
3.方法
下面是一些可与 modal() 一起使用的有用的方法。
方法 | 描述 | 实例 |
---|---|---|
Options:.modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 |
|
Toggle:.modal('toggle') | 手动切换模态框。 |
|
Show:.modal('show') | 手动打开模态框。 |
|
Hide: .modal('hide') | 手动隐藏模态框。 |
|
4.事件
下表列出了模态框中要用到事件。
事件 | 描述 | 实例 |
---|---|---|
show.bs.modal | 在调用 show 方法后触发。 |
|
shown.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 |
|
hide.bs.modal | 当调用 hide 实例方法时触发。 |
|
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 |
|
bootstrap-js(1)模态框的更多相关文章
- Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...
- bootstrap课程11 模态框如何使用
bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...
- bootstrap弹出模态框会给body加padding的解决方法
bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...
- 拥Bootstrap入怀——模态框(modal)篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- bootstrap中的模态框(modal,弹出层)
默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...
- BootStrap的动态模态框及静态模态框
1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...
- 【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
- bootstrap 点击模态框上的提交按钮后,模态框不能关闭的解决办法
项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(del ...
- Bootstrap——可拖动模态框(Model)
还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...
随机推荐
- sharepoint 2010 使用自定义列表模版创建列表(2)
前面用的方法是通过界面上操作,根据自定义模版,创建的列表.sharepoint 2010 使用自定义列表模版创建列表(1) 这里顺便记录多另一种方法,通过程序来创建. ---------------- ...
- DayOfWeek中英文星期转换
DateTime.Now.DayOfWeek; //英文星期几 var dayOfWeek = new List<string>() { "星期日", " ...
- Material Design之FloatingActionButton的使用
FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性. CoordinatorLayout能够用来配合Flo ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- 初探swift语言的学习笔记七(swift 的关健词)
每一种语言都有相应的关键词,每个关键词都有他独特的作用,来看看swfit中的关键词: 关键词: 用来声明的: “ class, deinit, enum, extension, func, impor ...
- 每日一小练——Eratosthenes 筛选法
上得厅堂.下得厨房,写得代码.翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Eratosthenes筛选法 内容: 求质数是一个非常普遍的问题,通常不外乎用数去除.除到不尽时,给定的数就是质数.可是 ...
- 【floyd求最小环】【Vijos 1046】【观光旅游】
标签:图结构 最短路 题目大意:给你一个无向图,至少经过3个节点的简单回路(不能包括其他环) 一开始的思路:用一个NUM[i][j]表示i到j的最短路经过几个节点,显然解法不太优美,而且还是错的 再想 ...
- ThInkPHP中的常量
除了常规变量的输出外,模板引擎还支持系统变量和系统常量.以及系统特殊变量的输出.它们的输出不需要事先赋值给某个模板变量.系统变量的输出必须以$Think.打头,并且仍然可以支持使用函数.常用的系统变量 ...
- python基础:列表生成式和生成器
列表生成式(List Comprehension) 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成 list ...
- Apache-Tomcat 和 Apache-Maven配置
1.1.下载安装文件 官网对应版本下载,例:apache-tomcat-8.0.35-windows-x64.zip 1.2.指定对应的安装目录: 例:D:\JavaSoft\apache-tomca ...