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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模态对话框示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
</head>

<body>
  <div class="modal hide" id="myModal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  >&times;</button>
        <h3>对话框标题</h3>
      </div>
      <div class="modal-body">
        <p>你好...</p>
      </div>
      <div class="modal-footer">
        <a href="#"  data-dismiss="modal" class="btn">关闭</a>
        <a href="#" class="btn btn-primary">保存</a>
      </div>
  </div>

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

运行效果：

需要注意：

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

<!DOCTYPE html> 
<html lang="en"> 
 ... 
</html>

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

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

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

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

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

<div class="modal hide" id="myModal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  >&times;</button>
        <h3>对话框标题</h3>
      </div>
      <div class="modal-body">
        <p>你好...</p>

      </div>
      <div class="modal-footer">
        <a href="#"  data-dismiss="modal" class="btn">关闭</a>
        <a href="#" class="btn btn-primary">保存</a>
      </div>
</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，这样点击激发元素就会弹出对话框。

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

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

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

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

2.通过javascript触发

.modal(options)

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

示例：

$('#myModal').modal()

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

参数设置

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

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

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

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

加到触发元素上

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

加到对话框元素上

对于通过javascript设置，如下：

$('#myModal').modal({
  keyboard: false
})

另外还提供了几个控制方法，如下：

.modal('toggle')

手动切换对话框打开和关闭，即在关闭与打开间转换。

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

.modal('show')

打开对话框

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

.modal('hide')

关闭对话框

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

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

需要设置2个地方：

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

<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>

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

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

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

添加类样式.fade

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>带过度效果的模态对话框示例</title> <link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script> </head> <body> <div class="modal hide fade" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" >×</button> <h3>对话框标题</h3> </div> <div class="modal-body"> <p>你好...</p> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">关闭</a> <a href="#" class="btn btn-primary">保存</a> </div> </div> <button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button> </body> </html>

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

事件描述

show 该事件在调用 show 方法时立刻触发。

shown 该事件在对话框已经呈现给用户后（要等CSS过渡效果生效后）触发。

hide 该事件在对话框使用 hide 方法时立刻触发。

hidden 该事件在对话框已经关闭后（要等CSS过渡效果生效后）触发。

通过如下添加事件：

$('#myModal').on('事件名称', function () { // do something… })
示例：
$('#myModal').on('show', function () { // do something… })
添加show事件
$('#myModal').on('hidden', function () { // do something… })
添加hidden事件

.modal(options)

.modal('toggle')

.modal('hide')

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

+友情链接