基于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("×")).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");
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值