当前位置：Gxlcms > mysql > BootstrapJS插件使用实例(2)

BootstrapJS插件使用实例(2)

时间：2021-07-01 10:21:17 帮助过：33人阅读

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.

其中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;">