点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

BootstrapJS插件使用实例(2)

来源：动视网责编：小采时间：2020-11-09 07:36:46

BootstrapJS插件使用实例(2)

BootstrapJS插件使用实例(2):Bootstrap JS插件使用实例(2)-模态对话框发表于 2013-04-27 17:16 ,已有 2484 次阅读，共 8 个评论本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint 01. !DO

推荐度：

点击下载本文 文档为doc格式

导读BootstrapJS插件使用实例(2):Bootstrap JS插件使用实例(2)-模态对话框发表于 2013-04-27 17:16 ,已有 2484 次阅读，共 8 个评论本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint 01. !DO

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;">"text/javascript"
src="http://www.see-source.com/bootstrap/js/jquery.js">

2."text/javascript"
src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js">

3."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事件

    

    
    
        BootstrapJS插件使用实例(2)
        BootstrapJS插件使用实例(2):Bootstrap JS插件使用实例(2)-模态对话框 发表于 2013-04-27 17:16 ,已有 2484 次阅读 ，共 8 个评论 本篇文章讨论Bootstrap的js模态对话框插件(bootstrap-modal.js) 先看个简单示例，可直接粘贴运行： view sourceprint 01. !DO
        推荐度：
    
    
        
            点击下载本文
            文档为doc格式
        
    

              
        
                
            标签：
                        使用
                        插件
                        js
                    
                
            
             
                    
                        热门焦点















    



    
         
            产品服务
            发展历程
            企业资讯
            企业文化
            关于我们
            加入我们
            联系我们
            网站导航
            网站律师
        
        
            
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     中国扫黄打非网
                 
             
        
         
            
            Copyright © 2019-2025 51dongshi.net 版权所有
            
                赣ICP备2023002352号-34
            
            违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
            
        
    




Top