//万能模态弹出框。标题,显示的元素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("×")).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("×")).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("×")).append($("<h4>").addClass("modal-title").html(title)))
.append($("<div>").addClass("modal-body").append(content)).append(footer))).modal("show");
}
基于boostrap的tipWindow,confirmWindow,modalWindow
最新推荐文章于 2023-03-13 19:24:12 发布