【原创】基于Bootstrap的Modal二次封装

前言Bootstrap：Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架

官方网站：http://www.bootcss.com/

1.Bootstrap Modals（模态框）基本用法使用bootstrap之前需要应用jquery.js和bootstrap.js以及bootstrap.css注意：最新版的bootstrap需要和jquery1.9以上版本配合使用

<buttonclass="btn btn-PRimary btn-lg"data-toggle="modal"data-target="#myModal">开始演示模态框</button><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title"id="myModalLabel">模态框（Modal）标题</h4></div><divclass="modal-body">在这里添加一些文本</div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btn btn-primary">提交更改</button></div></div></div></div>

当我们点击button的时候会触发Modal,效果如下图所示

2.0先看我们的封装代码$(function () {if($.fn.modal) {

$.fn.modal.defaults.spinner= $.fn.modalmanager.defaults.spinner ='<div class="loading-spinner" style="width: 200px; margin-left: -100px;">'+'<div class="progress progress-striped active">'+'<div class="progress-bar" style="width: 100%;"></div>'+'</div>'+'</div>';

$.fn.modalmanager.defaults.resize=true;

}

window.Modal=function () {var_tplHtml ='<div class="modal created-modal" id="[Id]">'+'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+'<h5 class="modal-title"><i class="icon-exclamation-sign"></i> [Title]</h5>'+'</div>'+'<div class="modal-body small">'+'<p>[Message]</p>'+'</div>'+'<div class="modal-footer" >'+'<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>'+'<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>'+'</div>'+'</div>';var_tplLoaDHTML='<div class="modal created-modal" id="[Id]">'+'<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'+'<h5 class="modal-title">[Title]</h5>'+'</div>'+'<div class="modal-body small">'+'<iframe src="[Url]" frameborder="0" width="100%" height="[Height]px" style="padding:0px; margin:0px;"></iframe>'+'</div>'+'</div>';varreg =newRegExp("\\[([^\\[\\]]*?)\\]",'igm');var_alert =function (options) {varid =_dialog(options);varmodal = $('#'+id);

modal.find('.ok').removeClass('btn-success').addClass('btn-primary');

modal.find('.cancel').hide();return{

id: id,

on: function (callback) {if(callback &&callback instanceof Function) {

modal.find('.ok').click(function () { callback(true); });

}

hide: function (callback) {if(callback &&callback instanceof Function) {

modal.on('hide.bs.modal', function (e) {

callback(e);

});

}

};

};var_confirm =function (options) {varid =_dialog(options);varmodal = $('#'+id);

modal.find('.ok').removeClass('btn-primary').addClass('btn-success');

modal.find('.cancel').show();return{

id: id,

on: function (callback) {if(callback &&callback instanceof Function) {

modal.find('.ok').click(function () { callback(true); });

modal.find('.cancel').click(function () { callback(false); });

}

hide: function (callback) {if(callback &&callback instanceof Function) {

modal.on('hide.bs.modal', function (e) {

callback(e);

});

}

};

};var_load =function (options) {varops ={

url:'',

title:'',

width:800,

height:550};

$.extend(ops, options);varmodalId =_getId();varhtml =_tplLoadHtml.replace(reg, function (node, key) {return{

Id: modalId,

Title: ops.title,

Url: ops.url,

Height: ops.height

}[key];

});

$('body').append(html);varmodal = $('#'+modalId).modal({

width: ops.width

});

$('#'+ modalId).on('hide.bs.modal', function (e) {

$(this).parent('.modal-scrollable').next().remove();

$(this).parent('.modal-scrollable').remove();

$('body').modalmanager('toggleModalOpen');

});

}var_getId =function () {vardate =newDate();return'mdl'+date.valueOf();

}var_dialog =function (options) {varops ={

msg:"提示内容",

title:"操作提示",

btnok:"确定",

btncl:"取消",

width:400,

auto:false};

$.extend(ops, options);varmodalId =_getId();varhtml =_tplHtml.replace(reg, function (node, key) {return{

Id: modalId,

Title: ops.title,

Message: ops.msg,

BtnOk: ops.btnok,

BtnCancel: ops.btncl

}[key];

});

$('body').append(html);

$('#'+modalId).modal({

width: ops.width,

backdrop:'static'});

$('#'+ modalId).on('hide.bs.modal', function (e) {//$(this).parent('.modal-scrollable').next().remove();//$(this).parent('.modal-scrollable').remove();$('body').modalmanager('toggleModalOpen');

});returnmodalId;

}var_cancelCheckbox =function () {//设置取消样式$(".datagrid-header-check .checker").find("span").attr("class","");//取消头部第一个checkbox的样式$(".datagrid-cell-check .checker").find("span").attr("class","");//取消列表选中checkbox的样式$(".datagrid-btable").find("tr").attr("class","datagrid-row");//取消选中行的样式$(":checkbox:checked").attr("checked",false);//取消所有选中状态};return{

alert: _alert,

confirm: _confirm,

load: _load,

cancelcheck: _cancelCheckbox,

loading: function () {

$('body').modalmanager('loading');

removeLoading: function () {

$('body').modalmanager('removeLoading');

}

}();

});

3.0接下来看我们的案例代码@{

Layout=null;

}

//这里引入的文件要按照顺序<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<html>

<head>

<title>Index</title>

</head>

<body>

<button type="button"class="btn btn-primary"onclick="testalert()">测试alert</button>

<button type="button"class="btn btn-success"onclick="testload()">测试load</button>

<button type="button"class="btn btn-warning"onclick="testconfirm()">测试confirm</button>

</div>

</body>

</html>

Modal.alert({msg:"测试"});

}

function testload() {

Modal.load({ msg:"测试", url:"/Home/GetMsg/", title:"远程加载页面", width:1100, height:650});

}

function testconfirm() {

Modal.confirm({ msg:"确认要加载吗？"}).on(function (e) {if(e) {

Modal.load({ msg:"测试", url:"/Home/GetMsg/", title:"远程加载页面", width:1100, height:650});

}

});

}</script>

4.0看我们达到的效果