本文主要包含bootstrap,javascript,html等相关知识,xdnloveme的博客希望在学习及工作中可以帮助到您
bootstrap的模态框很好用。为了更好的复用，更好地理解使用，记录一下。
顺便再使用一下argument，来达到多参数重载的目的：
整个modal框的使用可以浏览：点击打开链接
整个modal的使用很简单，直接贴代码：
function modalActive(){
var status = '';
var htm = "<div id='alertwindow' aria-hidden='true' data-backdrop='true' class='modal fade' tabindex='-1' role='dialog'>"
+"<div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><h4 style='text-align:center;' class='modal-title'></h4></div><div class='modal-body'></div><div class='modal-footer'><button data-dismiss='modal' id='confirm-modal' type='button' class='btn btn-primary' >确认</button><button id='close-modal' data-dismiss='modal' type='button' class='btn btn-default'>关闭</button></div></div></div></div>";
if($("#alertwindow").length > 0){
status = '模态框已存在,开始渲染';
}else{
$("body").append(htm);
}
// if(arguments.length)
switch(arguments.length){
case 0: break;
case 1: $('#alertwindow').modal(arguments[0]); break;
case 2:
if (arguments[0] === 'title') {
$('.modal-title').html(arguments[1]);
}else if(arguments[0] === 'content'){
$('.modal-body').html(arguments[1]);
}else{
status= status+ '出现了参数错误';
}
break;
case 3:
if(arguments[0] === 'title'){
$('.modal-title').css(arguments[1],arguments[2]);
}else if(arguments[0] === 'content'){
$('.modal-body').css(arguments[1],arguments[2]);
}else if(arguments[0] === 'button'){
if(arguments[1] === '确认'){
$('#confirm-modal').click(arguments[2]);
}else if(arguments[1] === '关闭'){
}
}else{
status= status +'出现了参数错误';
}
break;
default: break;
}
console.log(status);
$(function(){
$('#alertwindow').on('hidden.bs.modal', function () {
$('#alertwindow').remove();
//alert(1);
})
})
}
这里比较重要的是argument这个属性，这是一个数组对象，长度代表传入的参数数量，argument[0]是第一个参数，以此类推。
关于使用：
modalActive('title','<h4>预订成功！<h4>');
modalActive('title','color','green');
modalActive("content","<h4>预约时间为 <font color='green'>2017-7-9</font>， <br><br><font color='red' size='3'>提示：进场时间请提前15分钟</font></h4>");
modalActive('show');
演示如下：
<iframe width="100%" height="300" src="https://c.runoob.com/iframe/3629" allowfullscreen="allowfullscreen" frameborder="0"></iframe>