使用Bootstrap时遇到的问题

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