Bootstrap JS插件使用实例(2)-模态对话框 发表于 2013-04-27 17:16 ,已有 2484 次阅读 ，共 8 个评论 本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint? 01. !DOCTYPE html 02. html lang = Bootstrap JS插件使用实例(2)-模态对话框 发表于 2013-04-27 17:16 ,已有2484次阅读 ，共8个评论 本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint? 01. 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" >×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。因此这一文档类型必须出现在项目的每个页面的开始部分。 view sourceprint? 1. 2.html lang="en"> 3.... 4.html> 下面来对上面的代码进行解析下： bootstrap.css Bootstrap 样式库，这是必不可少的。 jquery.js 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。 bootstrap-modal.js 模式对话框插件 将上面代码中关于对话框的部分摘出来： view sourceprint? 01.div class="modal hide" id="myModal"> 02.div class="modal-header"> 03.button type="button" class="close" data-dismiss="modal" >×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，这样点击激发元素就会弹出对话框。 如上面示例中的激发元素： view sourceprint? 1.class="btn" type="button" data-toggle="modal" data-target="#myModal" >打开对话框 其中data-target 的值要与某个对话框的id一致，表示将其作为对话框并激活、打开。如上面示例中的id为myModal： view sourceprint? 1.div class="modal hide" id="myModal"> 2..... 3.div> 2.通过javascript触发 .modal(options) 使用此通用方法将某个元素变成对话框激活 示例： view sourceprint? 1.$('#myModal').modal() 将id="myModal"的元素作为对话框并打开。 参数设置 在触发对话框时还可以设置一些参数： 名称 类型 默认 描述 backdrop 布尔值 true 为true时，显示对话框的遮蔽背景，鼠标点击背景即可关闭对话框。 为false时，无背景。 keyboard 布尔值 true 为true时按下ESC键关闭模态对话框。 为false时无效。 show 布尔值 true 是否在初始化时显示对话框。 参数可以通过data属性或JavaScript传递。对于data属性，将参数名称附着到data-之后，即data-backdrop="true" 。参数可以加到触发元素上，也可加到对话框元素上，示例如下： view sourceprint? 1.button class="btn" type="button" data-toggle="modal" data-target="#myModal" data-backdrop="false">打开对话框button> 加到触发元素上 view sourceprint? 1.div class="modal hide fade" id="myModal" data-backdrop="false"> 加到对话框元素上 对于通过javascript设置，如下： view sourceprint? 1.$('#myModal').modal({ 2.keyboard: false 3.}) 另外还提供了几个控制方法，如下： .modal('toggle') 手动切换对话框打开和关闭， 即在关闭与打开间转换。 view sourceprint? 1.$('#myModal').modal('toggle') .modal('show') 打开对话框 view sourceprint? 1.$('#myModal').modal('show') .modal('hide') 关闭对话框 view sourceprint? 1.$('#myModal').modal('hide') 设置过度效果(动态效果) 需要设置2个地方： 首先要引入过度效果的javascript插件bootstrap-transition.js,同时将对话框的html元素添加类样式.fade。如下： view sourceprint? 1."margin:0px;padding:0px;"><code>"text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"> 2.<code>"text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"> 3.<code>"text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"> 添加过度效果插件bootstrap-transition.js view sourceprint? 1.div class="modal hide fade" id="myModal" > 添加类样式.fade 示例： view sourceprint? 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;"> 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" >×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过渡效果生效后）触发。 通过如下添加事件： view sourceprint? 1.$('#myModal').on('事件名称', function () { 2.// do something… 3.}) 示例： view sourceprint? 1.$('#myModal').on('show', function () { 2.// do something… 3.}) 添加show事件 view sourceprint? 1.$('#myModal').on('hidden', function () { 2.// do something… 3.}) 添加hidden事件
