1.禁止动画效果


如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。一般还是不要去动这个,最多自己换个类名在写其他样式,不然你会头大的。

  1. <div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  2. ...
  3. </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,则会加载其中的内容。如下面的实例所示:
  1. <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

3.方法


下面是一些可与 modal() 一起使用的有用的方法。

方法 描述 实例
Options:.modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
  1. $('#identifier').modal({
  2. keyboard: false
  3. })
Toggle:.modal('toggle') 手动切换模态框。
  1. $('#identifier').modal('toggle')
Show:.modal('show') 手动打开模态框。
  1. $('#identifier').modal('show')
Hide: .modal('hide') 手动隐藏模态框。
  1. $('#identifier').modal('hide')

4.事件


下表列出了模态框中要用到事件。

事件 描述 实例
show.bs.modal 在调用 show 方法后触发。
  1. $('#identifier').on('show.bs.modal', function () {
  2. // 执行一些动作...
  3. })
shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
  1. $('#identifier').on('shown.bs.modal', function () {
  2. // 执行一些动作...
  3. })
hide.bs.modal 当调用 hide 实例方法时触发。
  1. $('#identifier').on('hide.bs.modal', function () {
  2. // 执行一些动作...
  3. })
hidden.bs.modal 当模态框完全对用户隐藏时触发。
  1. $('#identifier').on('hidden.bs.modal', function () {
  2. // 执行一些动作...
  3. })

bootstrap-js(1)模态框的更多相关文章

  1. Bootstrap Modals(模态框)

    http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html 描述 Bootstrap Modals(模态框)是使用定制的 Jquery ...

  2. bootstrap课程11 模态框如何使用

    bootstrap课程11 模态框如何使用 一.总结 一句话总结:多看手册咯. 1.模态框对应的英文单词是什么? modal,而不是madel 2.bootstrap中如何关闭某个效果? 比如要关掉m ...

  3. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  4. 拥Bootstrap入怀——模态框(modal)篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  5. 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  6. bootstrap中的模态框(modal,弹出层)

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  7. BootStrap的动态模态框及静态模态框

    1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样 代码如下: 有疑问的可以在下面留言,欢迎大家一起交流 1.1动态模态框 <!DOCTYPE html&g ...

  8. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  9. bootstrap 点击模态框上的提交按钮后,模态框不能关闭的解决办法

    项目问题如下图, 点击确定后,模态框没反应,按理,点击删除按钮时,弹出确认删除的模态框,点击确定后,使用ajax请求服务器,把数据库中对应的数据进行删除,根据服务器 servlet返回的状态值(del ...

  10. Bootstrap——可拖动模态框(Model)

    还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框.网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下, ...

随机推荐

  1. Android studio SweetAlert for Android

    找到个开源项目.github:https://github.com/pedant/sweet-alert-dialog 效果图:https://raw.githubusercontent.com/pe ...

  2. android soundpool 參数说明

    SoundPool 类的构造函数例如以下: SoundPool(int maxStreams, int streamType, int srcQuality) 作用:实例化一个SoundPool 实例 ...

  3. 移动端H5页面之iphone6的适配

    iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H ...

  4. 编写javascript的基本技巧

    第一.编写可维护的代码 什么叫着编写可维护的代码呢?就是当我的做出来的项目,拿给其它编码团队能很快的看懂 你编写的代码,你的整个项目的逻辑等等.一个项目的修改维护是要比开发一个项目的成本 是要高的.例 ...

  5. Android appcompat备案

    使用Eclipse创建Android项目,project多出appcompat_v7,此情况在ADT升级到22.6.x版本后出现,22.3.x前版本不存在.此项为了实现向下兼容sdk的功能. 点击项目 ...

  6. HTML5添加背景音乐

    html5 audio 给博客 网页加背景音乐 可以加上个按钮或者链接 让其可停止或暂停 下面代码只是暂停 可以弄成暂停 播放两种状态切换.. 可以考虑换成a标签 <a href="# ...

  7. q.js实现nodejs顺序调用

    nodejs的异步调用有时候是最让人头疼的,如何能是一些代码顺序的执行呢,这里和大家分享nodejs的promise 什么是promise promise一个标准,它描述了异步调用的返回结果,包括正确 ...

  8. LeetCode之ReverseWorldString

    题目:将一个英文句子翻转,比如:the sky is blue 翻转后变为:blue is sky the 分析:我的实现方法是,利用栈将单词存储起来,然后再顺序拿出来,单词进栈还需注意添加空格. 主 ...

  9. MFC对话框中解决回车键、ESC键退出的方法

    BOOL CYourDlg::PreTranslateMessage(MSG* pMsg) { if(pMsg->message==WM_KEYDOWN&&pMsg->wP ...

  10. python中调用C++写的动态库

    一.环境:Windows XP + Python3.2 1. dll对应的源文件(m.cpp): #include <stdio.h> extern "C" { _de ...