调用方式

通过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. })

最新文章

  1. ASP.NET中的chart控件绑定SQL Server数据库
  2. 基于C#和Asp.NET MVC开发GPS部标监控平台
  3. 用python2.7,采集新浪博客
  4. rabbitmq之work_pool
  5. TCP/IP详解--发送ACK和RST的场景
  6. Maven学习总结(七)——eclipse中使用Maven创建Web项目
  7. Oracle数据库归档模式的切换及其相关操作详解
  8. curl Protocol &#39;http not supported or disabled in libcurl
  9. C# Redis分布式缓存
  10. openerp学习笔记 计算字段支持搜索
  11. C#转换日期类型
  12. java split IP地址要用双斜杠
  13. Java学习----方法的覆盖
  14. Asp.net中具体的日期格式化用法
  15. linux之SQL语句简明教程---函数
  16. winform基础——数据访问及几个案例
  17. 中文/英文双语言版本TWRP for Nexus5 -hammerheadcaf
  18. 201521123062《Java程序设计》第9周学习总结
  19. sphinx+reStructuredText制作文档
  20. C#对象与XMl文件之间的相互转换(转)

热门文章

  1. 转载 Deep learning:二(linear regression练习)
  2. [Python] spides
  3. Java Queue 各种方法的区别
  4. leetcode83,删除有序链表中的重复元素
  5. form异步无刷新提交,提交后可以显示弹出框,否则弹出框会被刷新不见,使用 preventDefault
  6. 一个Cmake的例子
  7. iOS 的 APP 如何适应 iPhone 5s/6/6Plus 三种屏幕的尺寸?
  8. restlet上传图片代码
  9. Vim常用命令【转载】
  10. 多个dropdownlist只有第一个能选中,其他选不中之我见