基于boostrap的tipWindow,confirmWindow,modalWindow

//万能模态弹出框。标题,显示的元素id,一般放在<script>里不占用DOM,参考kendo ui template,btns是按钮数组,callbacks按钮注册的click回调。
//<script type="text/template" id="id"><div class="row"></div></script> script的type不为text/javascript即可,这样浏览器不会解析,且通过$("#id")是能取到的,但是取出来的不是一个DOM节点,因此常用的操作DOM方法不能用于它。
function modalWindow(title,element,btns,callbacks){
	var footer = $("<div>").addClass("modal-footer").append($("<button>").attr("type","button").addClass("btn btn-default").attr("data-dismiss","modal").text("关闭"));
	if(btns){
		if(!$.isArray(btns)){
			footer.append($("<button>").attr("type","button").addClass("btn btn-primary").html(btns).on("click", callbacks));
		}else{
			$.each(btns, function(index,btn){
				footer.append($("<button>").attr("type","button").addClass("btn btn-primary").html(btn).on("click", callbacks[index]));
			});
		}
	}
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html(title)))
	.append($("<div>").addClass("modal-body").append($(element).html())).append(footer))).modal("show");
}

//提示框
function tipWindow(content,okBtn){
	var footer = $("<div>").addClass("modal-footer").append($("<button>").attr("type","button").addClass("btn btn-primary").attr("data-dismiss","modal").text(okBtn||"关闭"));
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html("系统提示")))
	.append($("<div>").addClass("modal-body").append($("<p>").html(content))).append(footer))).modal("show");
}

//取消确认框
function confirmWindow(title,content,okBtn,cancelBtn,okCallback,cancelCallback){
	var cancel = $("<button>").attr("type","button").addClass("btn btn-default").text(cancelBtn);
	if(cancelCallback && typeof cancelCallback == 'function'){
		cancel.on("click", cancelCallback);
	}else{
		cancel.attr("data-dismiss","modal");
	}
	var ok = $("<button>").attr("type","button").addClass("btn btn-primary").text(okBtn).on("click", okCallback);
	var footer = $("<div>").addClass("modal-footer").append(cancel).append(ok);
	$("<div>").addClass("modal fade").attr("role", "dialog").append($("<div>").addClass("modal-dialog").append($("<div>").addClass("modal-content").append($("<div>").addClass("modal-header")
	.append($("<button>").attr("type","button").addClass("close").attr("data-dismiss","modal").html("&times;")).append($("<h4>").addClass("modal-title").html(title)))
	.append($("<div>").addClass("modal-body").append(content)).append(footer))).modal("show");
}

你可能感兴趣的:(JavaScript,bootstrap)