BootStrap的modal模态框的使用

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);
	      })
	    })
}

整个模态框产生的过程如下：

1、通过htm定义一个模态框模板：

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>";

可以看到这个模板包括一个头部（head），身体（body），尾部（foot），在需要的时候调用这个代码产生一个未**的模态框。

2、通过参数传入，判断用哪个方法：（具体方法见官方文档） 点击打开链接

两个参数的使用：是定义头部，身体，尾部的内容。三个参数是设置每个头部身体尾部的样式或者一些设定，同时也可以支持写入方法，以此类推可以自己扩展。

3、最后这个方法很重要：

$('#alertwindow').on('hidden.bs.modal', function () {
	        $('#alertwindow').remove();
	        //alert(1);
	      })

这个表示在模态框消失后，执行某个操作，同理还有show，shown，

hide，hide和hiden的区别是：前者hide表示一调用这个hide函数立马执行，后者hidden表示调用hide函数后，要等模态框消失后，才执行这个函数。（ps：这里是把模态框的模板代码remove掉）

最后

这里比较重要的是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');

演示如下：

点击打开链接