模态对话框 bootstrap-modal.js
调用方式
通过data属性
无需编写JavaScript代码即可生成一个对话框。在一个主控元素,例如按钮,上设置data-toggle="modal"
,然后再设置data-target="#foo"
或href="#foo"
用以指向某个将要被启动的对话框。
- <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
通过JavaScript
仅用一行JavaScript代码即可启动id为myModal
的对话框:
- $('#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
|
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object
.
- $('#myModal').modal({
- keyboard: false
- })
.modal('toggle')
手动打开或隐藏一个模态对话框。
- $('#myModal').modal('toggle')
.modal('show')
手动打开一个模态对话框。
- $('#myModal').modal('show')
.modal('hide')
手动隐藏一个模态对话框。
- $('#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). |
- $('#myModal').on('hidden', function () {
- // do something…
- })
模态对话框 bootstrap-modal.js的更多相关文章
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- Bootstrap modal.js 源码分析
/* ======================================================================== * Bootstrap: modal.js v3 ...
- Ionic4.x Modal模态对话框以及 Modal 传值
1.Modal 模态对话框简介 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出 ...
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- QT笔记之模态对话框及非模态对话框
模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等.所谓模态对话框就是在其 ...
- Cocos2d-js3.3 模态对话框的实现
首先,先了解一下什么是模态对话框,百度百科的给出了下面一个定义: 模态对话框(Modal Dialogue Box,又叫做模式对话框),是指在用户想要对对话框以外的应用程序进行操作时,必须首先对该对话 ...
- QT模态对话框及非模态对话框
QT模态对话框及非模态对话框 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对 ...
- 《手把手教你》系列技巧篇(二十八)-java+ selenium自动化测试-处理模态对话框弹窗(详解教程)
1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...
- js控制Bootstrap 模态框(Modal)插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- mongoDB2--mongoDB的下载和安装。
mongdb安装(1)安装准备我们在Linux环境下来安装mongodb,如果没有Linux操作系统的童鞋,可以使用Vmware虚拟机安装一个Linux虚拟环境来学习.这里就不再赘述.我们到mongo ...
- Jquery EasyUI datagrid后台数据表格生成及分页详解
由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...
- jQuery中的方法
jQuery中的方法来操作HTML标签中的属性 attr(name) 获取当前对象的指定的属性的值 attr(key,value) 给当前对象设置属性值 attr(properties) 一 ...
- PHP signal 信号
最早写php时,发现在终端执行一个php文件,会一直等待程序执行完成以后,终端才能继续下面的操作,若不小心按了下Ctrl+C会导致php程序退出,闭避免这种情况发生,将会使用php的系统编程,即sig ...
- 您可能无法使用服务器管理器,如果两个线程同时访问 IIS 管理 IIS 的修补程序
http://support.microsoft.com/kb/946517 如果多线程操作 win2003 iis 失败, 打上这个补丁就好了
- python中telnetlib模块的使用
一.Windows下开启Telnet服务 (详见:与Win7防火墙无缝结合 Telnet功能测试) 1.Windows 2000/XP/2003/Vista:默认已安装但禁止了Telnet服务 (1) ...
- LeetCode OJ 230. Kth Smallest Element in a BST
Total Accepted: 46445 Total Submissions: 122594 Difficulty: Medium Given a binary search tree, write ...
- AngularJS 的表单验证
最近开始学习angularjs,学到表单验证的时候发现有必要学习下大神的好文章: 转:http://www.oschina.net/translate/angularjs-form-validatio ...
- nextSibling,previousSibling,childNodes常见错误
在使用nextSibling与previousSibling时,常出现选不到预计对象的情况 eg: <div class="a">1</div> <d ...
- HDU 2018 undefined
题目思路:完全背包,dp[i][j]代表,砍j只怪,用i点疲劳最多能获得的经验值. 和平常的完全背包不一样的是多了一个限制条件:最多只砍S只怪,所以我们应该多一重循环来q:for 1->S,代表 ...