BootStrap 对话框

2019/7/25 2:26:37 人评论 次浏览 分类:学习教程

原文链接:http://www.cnblogs.com/boingTan/archive/2012/11/30/2795742.html

BootStrap 就不介绍了,百度一下很多介绍,总之是Twitter 的一些工程师做的一个开源的前台框架

首先第一个就是 : 强调! 所有的javascript插件都需要最新版本的jQuery支持。  官方自带的是1.8.1 /*! jQuery v@1.8.1 jquery.com | jquery.org/license */

第二个是: 强调! 要实现对话框显示与消隐时的动画效果,必须包含 bootstrap-transition.js.,再对 .modal 元素应用 .fade ,即可实现淡入淡出。

第三个自然就是 bootstrap-modal.js 了。

 

1 <script type="text/javascript" src="JS/jquery.js"></script>
2 <script type="text/javascript" src="JS/bootstrap/js/bootstrap-transition.js"></script>
3 <script type="text/javascript" src="JS/bootstrap/js/bootstrap-modal.js"></script>

 

通过javascript调用模态对话框:

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

选项(options):

1 $('#myModal').modal({
2     backdrop:true,
3     keyboard:true,
4     show:true
5 });
三个都是布尔值,默认都为 true
backdrop:为true时,显示对话框的遮蔽背景,鼠标点击背景即可关闭对话框。为false时,无背景。
keyboard:为true时按下ESC键关闭模态对话框。为false时无效。
show:是否在初始化时显示对话框。


不通过手写JavaScript调用模态对话框:
  
  首先要在某个激发元素上设置 data-toggle="modal" 
  然后在激发元素上设置 data-target="#myModal" 或href="#myModal"
  其中# 是代表 id 的意思 myModal是 模态对话框的id
  注意:只能用id 不能用class
  
  
 1 <a class="btn" data-toggle="modal" href="#myModal" 或者 data-target="#myModal">点击触发对话框</a>
 2 
 3 <div class="modal" id="myModal">
 4   <div class="modal-header">
 5     <a class="close" data-dismiss="modal">×</a>
 6     <h3>对话框标题</h3>
 7   </div>
 8   <div class="modal-body">
 9     <p>对话框内容</p>
10   </div>
11   <div class="modal-footer">
12     <a href="#" class="btn">关闭</a>
13     <a href="#" class="btn btn-primary">保存更新</a>
14   </div>
15 </div>

  不手写JavaScript设置选项(options):

    可以在激发元素或是对话框元素的“data-属性”中设置选项值:

    data-backdrop="false"

    data-keyboard="false"

    data-show="false"

    

1 <a class="btn" data-toggle="modal" href="#myModal"  data-keyboard="false" data-backdrop="false" >点击"无ESC关闭,无遮蔽背景"演示</a>

 

    


 

方法:

  由于是在Jquery的基础之上,所以下面基本和Jquery的事件处理和效果一样。

.modal(options)

将某个元素变成对话框激活,接受一个 object 做为可选参数。

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

事件

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

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

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

 



官方地址:http://twitter.github.com/bootstrap/javascript.html
中文版:http://wrongwaycn.github.com/bootstrap/docs/javascript.html

 

转载于:https://www.cnblogs.com/boingTan/archive/2012/11/30/2795742.html

相关资讯

  • 那些我们不愿意承认的事

    很久没有见的老朋友,准确的说应该是很久没有见过的老师,一个比我大两岁的老师,我上初中的时候他从高中回来教我了一年。后来又回去上高中,我上高中的时候他上大学,现在我刚大学毕业他创办了公司。昨日一见依然如故,他还是热爱销售,而我却成了纯粹的技术人员。 看到他…

    2015/6/22 13:12:47

学习教程

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->