bootstrap modal
模态框提供了两个可选尺寸,通过为 .modal-dialog 增加一个样式调整类实现。加modal-lg,加modal-sm,不加也可以,共有三种尺寸。
触发方式,data-target, 感觉比js得好用
触发modal的元素,给modal传值:可传多个值
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-user='sfp' data-name='hh'>
Launch demo modal
</button>
$('#myModal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget);
var user = button.data('user');
var name = button.data('name');
console.log(user);
console.log(name);
})
hide的话,就找不到谁触发modal的元素
button 中也可以通过href来触发,不过一般不会这么写
传参可以通过data-或者option
backdrop:static,点击遮罩层,模态框不会被关闭
backdrop:false,遮罩层,不会变灰
keyboard:键盘上的 esc 键被按下时关闭模态框。
show:模态框初始化之后就立即显示出来。 也很有用,再加某个条件才能show;如果一个modal是否立即显示 是唯一的,才可以这样用;如果一个按钮,点击之后,还要判断是否触发,就不能在modal上设置show了。
remote:如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是一个实例:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
方法:
.modal('toggle'):在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。
.modal('show'):在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。
.modal('hide'):在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。
.modal('handleUpdate'):modal open,height change,readjust modal's position.
事件:
show.bs.modal:show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal:此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal:hide 方法调用之后立即触发该事件。
hidden.bs.modal:此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
loaded.bs.modal:从远端的数据源加载完数据之后触发该事件。
如果想点击modal中的按钮,触发一定的事件,只能自己添加了。因为唯一的操作hide,不能区分是否要上传文件。
官网写的是,show之后传参和识别事件源;现在我想hide之后识别事件源,应该只能自己找了。
bootstrap modal的更多相关文章
- Bootstrap Modal 垂直方向加滚动条
原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...
- Bootstrap modal垂直居中
Bootstrap modal垂直居中 在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap modal常用参数、方法和事件
Bootstrap modal(模态窗)常用参数.方法和事件: 参数: 名称 类型 默认值 描述 Backdrop Boolean或字符串“static” True True:有背景,点击modal外 ...
- bootstrap modal 监听滚动条事件
bootstrap modal 里面使用datetimepicker时间控件,滚动时,时间控件并不会隐藏,这是一个小bug,在组里改下,当滚动条滚动时,直接隐藏这个时间控件,$("#alar ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- bootstrap modal与select2使用冲突解决
今天发现项目使用bootstrap modal 与 jquery select2 结合时发现select2不起作用,点击select框不显示选项,查阅资料后发现是因为modal层遮挡了select2的 ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- BootStrap Modal 点击空白时自动关闭
本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...
随机推荐
- IIS中利用ARR实现反向代理
反向代理是什么,不了解的,请自行百度.本人也是最近才研究这个主题,简单的来说,利用这项技术可以实现负载均衡,安全控制等web应用中重要的功能,对于web应用来说这是个很基础,也很重要的技术,值得开发者 ...
- sysdig
centos 7 安装 https://sysdig.com/opensource/sysdig/install/ 1) Trust the Draios GPG key, configure the ...
- fiddler 发送get请求
点击Composer 点击执行(Execute) \ 这里演示的是带cookie
- gff/gtf格式
1)gff3及gtf2简介 一个物种的基因组测序完成后,需要对这些数据进行解读,首先要先找到这些序列中转录起始位点.基因.外显子.内含子等组成元件在染色体中的位置信息(即注释)后才能再进行深入的分析. ...
- dubbo hessian+dubbo协议
Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况 Hessian协议用于集成Hessian的服务,Hessian底层采 ...
- MySql ERROR 1045 (28000): Access denied 错误
[MySql ERROR 1045 (28000): Access denied 错误] 即登陆错误,使用MySql登陆时,需使正确的username/passwd.通过 -u -p 参数即可. My ...
- Git操作的一些注意
这是在在学习Git时遇到的一些需要注意的地方,都是一些小细节的地方,可能会有错误的地方,希望大家可以指出谢谢 1.git使用,安装后,首先要打开git bash 2.必须登录后才可以操作git ...
- 参考 - spring boot 静态变量注入值
参考http://blog.csdn.net/zhayuyao/article/details/78553417 @Component public class A { private static ...
- linux分区之gpt(大于2T的分区)
1.文件系统限制: ext3块尺寸 最大文件尺寸 最大文件系统尺寸1KiB 16GiB 2TiB2KiB 256GiB 8TiB4KiB 2TiB 16TiB8KiB 16TiB 32 ...
- git设置别名alias
每次用git拉去版本库都很烦,特别是要从非origin源,非master分支, 例如 git pull gitlab mybranch ,这样很蛋疼. 1.写个sh去处理 2.可以通过git的别名设置 ...