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