使用Bootstrap时遇到的问题

来源：互联网发布：起名字软件编辑：程序博客网时间：2024/06/09 23:57

Bootstrap已经是耳熟能详的一个CSS框架，提供了一系列丰富的组件，一句话总结就是即便不会HTML&CSS，也可以开发一个拥有漂亮界面的网站。

之所以开这篇，主要是希望能够记录在使用Bootstrap的时候遇到的小问题总结在此。

1.动态的控制Modal的显示和隐藏

具体场景：在使用Ajax发起请求时，使用Modal来提示 “拼命加载中。。。” ，当从服务器请求回来后，Modal显示成“修改成功。。。”，然后在Modal再显示2秒，关闭。

function changeStatus(){var enId = $("#modify_goods_btn").attr("date-enId");var to_be_status = $("#modify_goods_btn").attr("data-value");if(enId == '' || to_be_status == ''){alert('修改失败，建议您刷新浏览器重试。');return false;}$.ajax({url:APP+"/goods/ajaxstatus",type:'post',dataType:'json',data:{'enId':enId, 'to_be_status':to_be_status,'_token':$('meta[name="_token"]').attr('content')},error:function(){alert('修改失败，建议您刷新浏览器重试。');return false;},success:function(data){if(data.status == 'success'){$("#modify_goods_status_body").html(data.message);setTimeout(hideModal, 2000);}else if (data.status == 'error'){$("#modify_goods_status_body").html(data.message);window.location.href = App+"/goods/mine";}else if(data.status == 'illegal'){$("#modify_goods_status_body").html(data.message);window.location.href = App+"/goods/mine";}else{$("#modify_goods_status_body").html('修改失败,建议您刷新浏览器重试');return false;}},beforeSend:function(){$("#modify_goods_status_body").html('玩命修改中...');}});}function hideModal(){$('#modify_goods_status').modal('hide');}

代码解析：

1.$('#modify_goods_status') 即为Modal的对象，通过bootstrap为Modal提供的modal()函数，参数设置为 'hide'，从而控制Modal隐藏。

2.那么控制Modal显示如何呢？只需要传入对象{show:true}即可。

$("#modify_goods_status").modal({show: true});

参考网址：

http://stackoverflow.com/questions/19596734/close-bootstraps-modal-with-ajax

0 0