//万能模态弹出框。标题,显示的元素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"); }