bootstrap modal loading效果
最近写响应式后台，需要前端按钮提交之后，通过ajax传到后台，需要 有loading效果，以及结果返回弹出modal效果。
modal：
在使用bootstrap的modal的时候，一个简单的弹出框代码：
1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 6 <h4 style="font-weight: bold" class="modal-title" id="myModalLabel">执行结果</h4> 7 </div> 8 <div class="modal-body"> 9 10 <div class="form-group"> 11 <label for="txt_departmentname">结果返回</label> 12 </div> 13 </div> 14 <div class="modal-footer"> 15 <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button> 16 </div> 17 </div> 18 </div> 19 </div>
这是默认隐藏的弹出框样式如下：
让该modal显示的2种方法：
1、是使用绑定事件，给对应button添加自定义属性：属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
2、使用js来控制我们的modal显示：$('#identifier').modal('show')
第二种方法是我们想要的结果。通过这种方法，我们可以自由控制modal显示的时间。推荐第二种。
注意：
- 第二种方法，显示的modal的位置不是居中。有2种方法：
一、修改bootstrap的源码，这种方法 我不建议。
二、直接给对应的modal通过js增加样式：
1 //boostrap model的居中设置 2 $(function(){ 3 // dom加载完毕 4 var $m_btn = $('#modalBtn'); 5 var $modal = $('#myModal'); 6 $m_btn.on('click', function(){ 7 $modal.modal({backdrop: 'static'}); 8 }); 9 10 // 测试 bootstrap 居中 11 $modal.on('show.bs.modal', function(){ 12 var $this = $(this); 13 var $modal_dialog = $this.find('.modal-dialog'); 14 // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零 15 $this.css('display', 'block'); 16 $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) }); 17 }); 18 19 });
居中问题解决！
二、loading效果，默认情况下bootstrap给咱们提供了loading的效果，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可。
还需要添加如下js：
1 <button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 2 type="button"> 加载状态 3 </button> 4 <script> 5 $(function() { 6 $(".btn").click(function(){ 7 $(this).button('loading').delay(1000).queue(function() { 8 // $(this).button('reset'); 9 // $(this).dequeue(); 10 }); 11 }); 12 }); 13 </script>
但是现在我们有个需求是：不仅仅是当我们请求的时候，请求完毕，关闭modal之后，按钮还原到初始状态。
经查找，有如下参数：
$().button('reset')
该方法重置按钮状态，并将按钮上的文本还原为原始值。
$().button('loading')
该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading。通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本。
如果您使用 Firefox 浏览器，您将发现，在页面加载之后，禁用状态不会自动解除，请使用 'autocomplete="off"' 来避免这个问题。
$().button(string)
该方法重置按钮状态，并将按钮上的文本重置为传入的值。
1 function res_back (ths){ 2 var post_data=$(ths).parents().find('textarea').text(); 3 $.ajax( 4 { 5 url:'/service_ping/', 6 method:'post', 7 dataType:'JSON', 8 data:{'server_str':post_data}, 9 success:function(callback){ 10 if(callback.status===1){ 11 console.log(callback.status); 12 $('#myModal').modal('show'); 13 $(".btn").button('reset') 14 15 } 16 } 17 } 18 ) 19 }
1 <button class='btn btn-primary' data-loading-text="卖力加载中....." data-toggle="modal" style="vertical-align:bottom;font-family:微软雅黑; 2 cursor:pointer" onclick="res_back(this);">检测</button>
