Bootstrap模态框简单学习

标签：btn   空间   分享   XML   关系   object   nali   .net   绑定   

前言

$(‘.btn.danger‘).button(‘toggle‘).addClass(‘fat‘)

$(‘#myModal‘).modal()                      // 使用默认值初始化
$(‘#myModal‘).modal({ keyboard: false })   // 初始化。不支持键盘导航
$(‘#myModal‘).modal(‘show‘)                // 初始化并立即展示</p>

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

$(‘#myModal‘).on(‘show.bs.modal‘, function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

模态框

案例

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

动态演示

点击下面的按钮即可通过JavaScript启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。

代码：

[html] view plain copy

 

 

1. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">加载模态框</button>  
2. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
3.   <div class="modal-dialog">  
4.     <div class="modal-content">  
5.       <div class="modal-header">  
6.         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
7.         <h4 class="modal-title">Modal title</h4>  
8.       </div>  
9.       <div class="modal-body">  
10.         <p>One fine body…</p>  
11.       </div>  
12.       <div class="modal-footer">  
13.         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
14.         <button type="button" class="btn btn-primary">Save changes</button>  
15.       </div>  
16.     </div><!-- /.modal-content -->  
17.   </div><!-- /.modal-dialog -->  
18. </div><!-- /.modal -->  

预览效果：

同样的，不过首先是一个按钮，按钮中添加了两个data属性，要设置data-toggle="modal" data-target="#myModal"。

然后下面最大的是一个modal，并且给与属性id赋值为上面button中的data-target ，进行交互。

增强模态框的可访问性

请确保为.modal添加了role="dialog"；aria-labelledby="myModalLabel"属性指向模态框标题；aria-hidden="true"告诉辅助性工具略过模态框的DOM元素。

另外，你还应该为模态框添加描述性信息。为.modal添加aria-describedby属性用以指向描述信息。

用法

通过data属性

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="#foo"指向特定的模态框即可。

例子就是上面的例子

通过JavaScript调用

只需一行JavaScript代码，即可通过id myModal调用模态框：

$(‘#myModal‘).modal(options)

方法

.modal(options)

将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。

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

.modal(‘toggle‘)

手动启动或隐藏模态框。

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

手动打开一个模态框。

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

手动隐藏一个模态框。

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

<script type="text/javascript">
    function test()
    {
        $(‘#myModal‘).modal(‘show‘);
    }    
</script>
<button onClick="test()" class="btn btn-primary btn-lg">
  Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        One fine body&hellip;
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

为按钮添加了onclick事件，也就是通过点击按钮触发事件来进行模态框的弹出。

事件

Bootstrap的模态框类暴露了一些事件用于截获并执行自己的代码。

[javascript] view plain copy

 

 

1. <script type="text/javascript">  
2.    $(‘#myModal‘).on(‘show.bs.modal‘, function () {  
3.        alert("show");  
4.    });     
5. $(‘#myModal‘).on(‘shown.bs.modal‘, function () {  
6.        alert("shown");  
7.    });     
8. $(‘#myModal‘).on(‘hide.bs.modal‘, function () {  
9.        alert("hide");  
10.    });     
11. $(‘#myModal‘).on(‘hidden.bs.modal‘, function () {  
12.        alert("hidden");  
13.    });     
14.   
15. </script>  

效果就是分别在显示时显示后关闭时关闭后可以执行自定义的函数。

Bootstrap模态框简单学习

标签：btn   空间   分享   XML   关系   object   nali   .net   绑定   

原文地址：http://www.cnblogs.com/dougest/p/6632122.html