调用方式

通过data属性

无需编写JavaScript代码即可生成一个对话框。在一个主控元素,例如按钮,上设置data-toggle="modal",然后再设置data-target="#foo"href="#foo" 用以指向某个将要被启动的对话框。

  1. <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通过JavaScript

仅用一行JavaScript代码即可启动id为myModal的对话框:

  1. $('#myModal').modal(options)

选项

上面的选项都可以通过data属性或JavaScript代码传递给组件。对于data属性,将选项名称附着于data-字符串之后,就像data-backdrop=""一样。

名称 类型 默认值 描述
backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

方法

.modal(options)

让你指定的内容变成一个模态对话框。接受一个可选的参数object.

  1. $('#myModal').modal({
  2. keyboard: false
  3. })

.modal('toggle')

手动打开或隐藏一个模态对话框。

  1. $('#myModal').modal('toggle')

.modal('show')

手动打开一个模态对话框。

  1. $('#myModal').modal('show')

.modal('hide')

手动隐藏一个模态对话框。

  1. $('#myModal').modal('hide')

事件

Bootstrap中的模态对话框对外暴露了一些事件允许你监听。

事件 描述
show This event fires immediately when the show instance method is called.
shown This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide instance method has been called.
hidden This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
  1. $('#myModal').on('hidden', function () {
  2. // do something…
  3. })

模态对话框 bootstrap-modal.js的更多相关文章

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

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

  2. Bootstrap modal.js 源码分析

    /* ======================================================================== * Bootstrap: modal.js v3 ...

  3. Ionic4.x Modal模态对话框以及 Modal 传值

    1.Modal 模态对话框简介 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出 ...

  4. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  5. QT笔记之模态对话框及非模态对话框

    模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等.所谓模态对话框就是在其 ...

  6. Cocos2d-js3.3 模态对话框的实现

    首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义: 模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话 ...

  7. QT模态对话框及非模态对话框

    QT模态对话框及非模态对话框 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对 ...

  8. 《手把手教你》系列技巧篇(二十八)-java+ selenium自动化测试-处理模态对话框弹窗(详解教程)

    1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...

  9. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  10. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. mongoDB2--mongoDB的下载和安装。

    mongdb安装(1)安装准备我们在Linux环境下来安装mongodb,如果没有Linux操作系统的童鞋,可以使用Vmware虚拟机安装一个Linux虚拟环境来学习.这里就不再赘述.我们到mongo ...

  2. Jquery EasyUI datagrid后台数据表格生成及分页详解

    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...

  3. jQuery中的方法

    jQuery中的方法来操作HTML标签中的属性 attr(name)    获取当前对象的指定的属性的值 attr(key,value)  给当前对象设置属性值 attr(properties)  一 ...

  4. PHP signal 信号

    最早写php时,发现在终端执行一个php文件,会一直等待程序执行完成以后,终端才能继续下面的操作,若不小心按了下Ctrl+C会导致php程序退出,闭避免这种情况发生,将会使用php的系统编程,即sig ...

  5. 您可能无法使用服务器管理器,如果两个线程同时访问 IIS 管理 IIS 的修补程序

    http://support.microsoft.com/kb/946517 如果多线程操作 win2003 iis 失败, 打上这个补丁就好了

  6. python中telnetlib模块的使用

    一.Windows下开启Telnet服务 (详见:与Win7防火墙无缝结合 Telnet功能测试) 1.Windows 2000/XP/2003/Vista:默认已安装但禁止了Telnet服务 (1) ...

  7. LeetCode OJ 230. Kth Smallest Element in a BST

    Total Accepted: 46445 Total Submissions: 122594 Difficulty: Medium Given a binary search tree, write ...

  8. AngularJS 的表单验证

    最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...

  9. nextSibling,previousSibling,childNodes常见错误

    在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...

  10. HDU 2018 undefined

    题目思路:完全背包,dp[i][j]代表,砍j只怪,用i点疲劳最多能获得的经验值. 和平常的完全背包不一样的是多了一个限制条件:最多只砍S只怪,所以我们应该多一重循环来q:for 1->S,代表 ...