模态对话框 bootstrap-modal.js
2024-08-21 11:17:38
调用方式
通过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…
- })
最新文章
- ASP.NET中的chart控件绑定SQL Server数据库
- 基于C#和Asp.NET MVC开发GPS部标监控平台
- 用python2.7,采集新浪博客
- rabbitmq之work_pool
- TCP/IP详解--发送ACK和RST的场景
- Maven学习总结(七)——eclipse中使用Maven创建Web项目
- Oracle数据库归档模式的切换及其相关操作详解
- curl Protocol &#39;http not supported or disabled in libcurl
- C# Redis分布式缓存
- openerp学习笔记 计算字段支持搜索
- C#转换日期类型
- java split IP地址要用双斜杠
- Java学习----方法的覆盖
- Asp.net中具体的日期格式化用法
- linux之SQL语句简明教程---函数
- winform基础——数据访问及几个案例
- 中文/英文双语言版本TWRP for Nexus5 -hammerheadcaf
- 201521123062《Java程序设计》第9周学习总结
- sphinx+reStructuredText制作文档
- C#对象与XMl文件之间的相互转换(转)
热门文章
- 转载 Deep learning:二(linear regression练习)
- [Python] spides
- Java Queue 各种方法的区别
- leetcode83,删除有序链表中的重复元素
- form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
- 一个Cmake的例子
- iOS 的 APP 如何适应 iPhone 5s/6/6Plus 三种屏幕的尺寸?
- restlet上传图片代码
- Vim常用命令【转载】
- 多个dropdownlist只有第一个能选中,其他选不中之我见