使用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



你可能感兴趣的:(bootstrap)