模态框提供了两个可选尺寸,通过为 .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的更多相关文章

  1. Bootstrap Modal 垂直方向加滚动条

    原文链接:http://blog.csdn.net/cyh1111/article/details/52960747 背景 使用Bootstrap Modal实现用户资料修改,由于用户信息过多,默认M ...

  2. Bootstrap modal垂直居中

    Bootstrap modal垂直居中   在网上看到有Bootstrap2的Modal dialog垂直居中问题解决方法,这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的m ...

  3. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  4. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  5. Bootstrap modal常用参数、方法和事件

    Bootstrap modal(模态窗)常用参数.方法和事件: 参数: 名称 类型 默认值 描述 Backdrop Boolean或字符串“static” True True:有背景,点击modal外 ...

  6. bootstrap modal 监听滚动条事件

    bootstrap modal 里面使用datetimepicker时间控件,滚动时,时间控件并不会隐藏,这是一个小bug,在组里改下,当滚动条滚动时,直接隐藏这个时间控件,$("#alar ...

  7. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  8. bootstrap modal与select2使用冲突解决

    今天发现项目使用bootstrap modal 与 jquery select2 结合时发现select2不起作用,点击select框不显示选项,查阅资料后发现是因为modal层遮挡了select2的 ...

  9. bootstrap modal 垂直居中对齐

    bootstrap modal 垂直居中对齐   文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...

  10. BootStrap Modal 点击空白时自动关闭

    本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...

随机推荐

  1. git基本命令之删除撤销操作

    1.将删除文件恢复--撤销所删除的文件git checkout 文件名 2.git resetgit reset --hard commitID(或某个节点)----强制切换到某个点,会导致所修改的内 ...

  2. Winform 无纸化办公-屏幕联动

    最近做无纸化办公,对接硬件,用了挺多东西总结一下 技术上主要是:asp.net .winform.activeX控件.chrome插件.socket编程,websocket. 其实看着需求挺简单的,在 ...

  3. sqlserver批量导出存储过程、函数、视图

    select text from syscomments s1 join sysobjects s2 on s1.id=s2.id  where xtype = 'V' xtype V   视图 P  ...

  4. java并发:CAS算法和ABA问题

    CAS算法是硬件对于并发的支持,针对多处理器操作而设计的处理器中的一种特殊指令. CAS用于管理对共享数据的并发访问. java的并发包中,AQS.原子操作类等都是基于CAS实现的. CAS 是一种 ...

  5. TZOJ 4839 麦森数(模拟快速幂)

    描述 形如2^P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P-1不一定也是素数.到1998年底,人们已找到了37个麦森数.最大的一个是P=3021377,它有9 ...

  6. 复制带随机指针的链表 · Copy List with Random Pointer

    [抄题]: 给出一个链表,每个节点包含一个额外增加的随机指针可以指向链表中的任何节点或空的节点. 返回一个深拷贝的链表. [思维问题]: [一句话思路]: 完完全全地复制,否则不好操作. 1-> ...

  7. 屏幕录像专家exe视频批量翻录成视频avi格式

    笔者下载过一些视频,全部是屏幕录像专家录制的exe视频,这些视频没有密码,可以顺利打开看看. 有一日想把这些视频转换成wmv格式放到手机上查看.一个目录下有那么大exe视频.一个个转特别麻烦. 后来想 ...

  8. DB2 SQL1477N问题

    ERROR [55019] [IBM][DB2/NT] SQL1477N  For table "DB_YHJX.YHJX_FHDKFHZ" an object "521 ...

  9. Oracle 基础表查询

    --查询所有用户表的数据 SELECT * FROM ALL_TABLES WHERE OWNER='USER_NAME' --如果是用该用户登录使用以下语句: SELECT * FROM USER_ ...

  10. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...