/**
* 生成bootstrap模态对话框
* @param {string} type 对话框类型 alert,success, error
* @param {string} title 对话框标题
* @param {string} content 对话框内容
*/
function bootstrapModal(type,title,content){
if(!$("body>div:last")||$("body>div:last").attr("id")!="modalBox"){
$("body").append("<div id=\"modalBox\"></div>");
}
modalDiv="";
modalDiv=modalDiv+"<div id=\"myModal\" class=\"modal hide fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">";
modalDiv=modalDiv+" <div class=\"modal-header\">";
modalDiv=modalDiv+" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
modalDiv=modalDiv+" <h3 id=\"myModalLabel\">"+title+"</h3>";
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" <div class=\"modal-body\">";
modalDiv=modalDiv+" <div id=\"modalContent\" class=\"msg-"+ type +"\">";
modalDiv=modalDiv+content;
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" <div class=\"modal-footer\">";
modalDiv=modalDiv+" <a class=\"btn\" data-dismiss=\"modal\" aria-hidden=\"true\">OK</a>";
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+"</div>";
$("#modalBox").html(modalDiv);
$("#myModal").modal();
}
/**
* function bootstrapModalX ()
* 生成bootstrap模态对话框
* @param {string} type 对话框类型 alert,success, error
* @param {string} title 对话框标题
* @param {string} content 对话框内容
* @param {string} modelType 当值为 confirm 时,为可绑定事件,可取消也可绑定。
* @param {string} btnEventText 绑定事件的按钮的文字
* @param {string} btnEventHtml 绑定按钮的HTML
*/
function bootstrapModalX(args){
if(args['type']==undefined) args['type']='success';
if(args['title']==undefined) args['type']='Success';
if(args['content']==undefined) args['content']='Operation is successful';
if(args['modalType']=='confirm') {
if(args['btnOkText']==undefined) args['btnOkText']=' Cancel ';
if(args['content']==undefined) args['content']='Are you confirm to do it.';
if(args['btnEventText']==undefined) args['btnEventText']=' Ok ';
if(args['btnEventHtml']==undefined) args['btnEventHtml']='<a href="javascript:return false;" class="btn btn-primary btnEvent"> '+args['btnEventText']+' </a>';
}else{
if(args['btnOkText']==undefined) args['btnOkText']=' OK ';
if(args['content']==undefined) args['content']='Operation is successful';
args['btnEventHtml']='';
}
if(!$("body>div:last")||$("body>div:last").attr("id")!="modalBox"){
$("body").append("<div id=\"modalBox\"></div>");
}
modalDiv="";
modalDiv=modalDiv+"<div id=\"myModal\" class=\"modal hide fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">";
modalDiv=modalDiv+" <div class=\"modal-header\">";
modalDiv=modalDiv+" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
modalDiv=modalDiv+" <h3 id=\"myModalLabel\">"+args['title']+"</h3>";
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" <div class=\"modal-body\">";
modalDiv=modalDiv+" <div id=\"modalContent\" class=\"msg-"+ args['type'] +"\">";
modalDiv=modalDiv+args['content'];
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+" <div class=\"modal-footer\">";
modalDiv=modalDiv+" <a class=\"btn\" data-dismiss=\"modal\" aria-hidden=\"true\">"+args['btnOkText']+"</a>";
modalDiv=modalDiv+args['btnEventHtml'];
modalDiv=modalDiv+" </div>";
modalDiv=modalDiv+"</div>";
$("#modalBox").html(modalDiv);
$("#myModal .modal-footer .btnEvent").click(myModelEvent);
$("#myModal").modal();
}
bootStrap 弹出对话框进阶
最新推荐文章于 2024-02-05 02:23:43 发布