modal模态框实例 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>文档标题</title>
</head>
<body>
    <button onclick='modal()' class='btn btn-primary'>
      点击我产生模态框
  </button>
</body>
</html>

HTML

xxxxxxxxxx
 
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);
          })
        })
}
​
function modal(){
    modalActive('title','<h4>预订成功！<h4>');
    modalActive('title','color','green');
    modalActive("content","<h4>预约时间为  <font color='green'>2017-7-8</font><br><br><font color='red' size='3'>提示：进场时间请提前15分钟</font></h4>");
modalActive('show');
}

JavaScript