Bootstrap JS插件使用实例(2)-模态对话框

最新推荐文章于 2024-08-19 19:55:55 发布

abo38416

最新推荐文章于 2024-08-19 19:55:55 发布

阅读量234

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaoxd/p/3195759.html

版权

Bootstrap JS插件使用实例(2)-模态对话框

发表于 2013-04-27 17:16 ,已有363次阅读，共0个评论

本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js)

先看个简单示例，可直接粘贴运行：

 
      01. 
      <!DOCTYPE html> 
     
      02. 
      <html lang="en"> 
     
      03. 
      <head> 
     
      04. 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     
      05. 
      <title>模态对话框示例</title> 
     
      06. 
      <link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> 
     
      07. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script> 
     
      08. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script> 
     
      09. 
      </head> 
     
      10. 
        
      11. 
      <body> 
     
      12. 
      <div class="modal hide" id="myModal"> 
     
      13. 
      <div class="modal-header"> 
     
      14. 
      <button type="button" class="close" data-dismiss="modal"  >&times;</button> 
     
      15. 
      <h3>对话框标题</h3> 
     
      16. 
      </div> 
     
      17. 
      <div class="modal-body"> 
     
      18. 
      <p>你好...</p> 
     
      19. 
      </div> 
     
      20. 
      <div class="modal-footer"> 
     
      21. 
      <a href="#"  data-dismiss="modal" class="btn">关闭</a> 
     
      22. 
      <a href="#" class="btn btn-primary">保存</a> 
     
      23. 
      </div> 
     
      24. 
      </div> 
     
      25. 
        
      26. 
      <button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button> 
     
      27. 
      </body> 
     
      28. 
      </html>

运行效果：

需要注意：

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分。

 
      1. 
      <!DOCTYPE html> 
     
      2. 
      <html lang="en"> 
     
      3. 
      ... 
     
      4. 
      </html>

下面来对上面的代码进行解析下：

bootstrap.css Bootstrap 样式库，这是必不可少的。

jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。

bootstrap-modal.js 模式对话框插件

将上面代码中关于对话框的部分摘出来：

 
      01. 
      <div class="modal hide" id="myModal"> 
     
      02. 
      <div class="modal-header"> 
     
      03. 
      <button type="button" class="close" data-dismiss="modal"  >&times;</button> 
     
      04. 
      <h3>对话框标题</h3> 
     
      05. 
      </div> 
     
      06. 
      <div class="modal-body"> 
     
      07. 
      <p>你好...</p> 
     
      08. 
        
      09. 
      </div> 
     
      10. 
      <div class="modal-footer"> 
     
      11. 
      <a href="#"  data-dismiss="modal" class="btn">关闭</a> 
     
      12. 
      <a href="#" class="btn btn-primary">保存</a> 
     
      13. 
      </div> 
     
      14. 
      </div>

bootstrap定义的对话框的结构。.modal样式用于定义整个对话框。对话框内包含三部分：modal-header、modal-body、modal-footer 。与上面的css样式名对应。modal-header主要用于显示标题，还可以带有关闭按钮。modal-body是正文部分，具体内容可自定义，一般可以是提示语，或是个表单。modal-footer主要显示操作按钮，如上面的"关闭"、"保存"。这三部分是一般对话框都具备的结构。

调用方式

1.通过data属性触发

我们无须手写javascript即可在页面中触发对话框。只要在某个激发元素上设置 data-toggle="modal" ，然后将 data-target="#foo" 或href="#foo" 设为某个对话框元素的id，这样点击激发元素就会弹出对话框。

如上面示例中的激发元素：

1. <button class="btn" type="button" data-toggle="modal" data-target="#myModal" >打开对话框</button>

其中data-target 的值要与某个对话框的id一致，表示将其作为对话框并激活、打开。如上面示例中的id为myModal：

 
      1. 
      <div class="modal hide" id="myModal"> 
     
      2. 
      .... 
     
      3. 
      </div>

2.通过javascript触发

.modal(options)

使用此通用方法将某个元素变成对话框激活

示例：

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

将id="myModal"的元素作为对话框并打开。

参数设置

在触发对话框时还可以设置一些参数：

名称	类型	默认	描述
backdrop	布尔值	true	为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。为false时，无背景。
keyboard	布尔值	true	为true时按下ESC键关闭模态对话框。为false时无效。
show	布尔值	true	是否在初始化时显示对话框。

参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到data-之后，即data-backdrop="true" 。参数可以加到触发元素上，也可加到对话框元素上，示例如下：

1. <button class="btn" type="button" data-toggle="modal" data-target="#myModal" data-backdrop="false">打开对话框</button>

加到触发元素上

1. <div class="modal hide fade" id="myModal" data-backdrop="false">

加到对话框元素上

对于通过javascript设置，如下：

 
       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')

设置过度效果(动态效果)

需要设置2个地方：

首先要引入过度效果的javascript插件bootstrap-transition.js,同时将对话框的html元素添加类样式.fade。如下：

 
      1. 
      <strong style="margin:0px;padding:0px;"><script type="text/javascript"src="http://www.see-source.com/bootstrap/js/jquery.js"></script> 
     
      2. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script> 
     
      3. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script></strong>

添加过度效果插件bootstrap-transition.js

1. <div class="modal hide fade" id="myModal" >

添加类样式.fade

示例：

 
      01. 
      <strong style="font-family:'sans serif', tahoma, verdana, helvetica;font-size:12px;line-height:1.5;margin:0px;padding:0px;"><strong style="font-family:Verdana, sans-serif, 宋体;font-size:14px;line-height:21px;margin:0px;padding:0px;"><!DOCTYPE html> 
     
      02. 
      <html lang="en"> 
     
      03. 
      <head> 
     
      04. 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     
      05. 
      <title>带过度效果的模态对话框示例</title> 
     
      06. 
      <link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> 
     
      07. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script> 
     
      08. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script> 
     
      09. 
      <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script> 
     
      10. 
      </head> 
     
      11. 
        
      12. 
      <body> 
     
      13. 
      <div class="modal hide  fade" id="myModal"> 
     
      14. 
      <div class="modal-header"> 
     
      15. 
      <button type="button" class="close" data-dismiss="modal"  >&times;</button> 
     
      16. 
      <h3>对话框标题</h3> 
     
      17. 
      </div> 
     
      18. 
      <div class="modal-body"> 
     
      19. 
      <p>你好...</p> 
     
      20. 
      </div> 
     
      21. 
      <div class="modal-footer"> 
     
      22. 
      <a href="#"  data-dismiss="modal" class="btn">关闭</a> 
     
      23. 
      <a href="#" class="btn btn-primary">保存</a> 
     
      24. 
      </div> 
     
      25. 
      </div> 
     
      26. 
        
      27. 
      <button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button> 
     
      28. 
      </body> 
     
      29. 
      </html></strong></strong>

事件

Bootstrap的对话框类扩展了一组事件，可以介入对话框的某些功能实现。

事件	描述
show	该事件在调用 `show` 方法时立刻触发。
shown	该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。
hide	该事件在对话框使用 `hide` 方法时立刻触发。
hidden	该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。

通过如下添加事件：

 
      1. 
      $('#myModal').on('事件名称', function () { 
     
      2. 
      // do something… 
     
      3. 
      })

示例：

 
      1. 
      $('#myModal').on('show', function () { 
     
      2. 
      // do something… 
     
      3. 
      })

添加show事件

 
      1. 
      $('#myModal').on('hidden', function () { 
     
      2. 
      // do something… 
     
      3. 
      })

添加hidden事件

转载于:https://www.cnblogs.com/zhaoxd/p/3195759.html