modal模态框的实现

1、html实现如下：

<div class="modal">    <div class="modal-content">         <div class="modal-header">            <span>添加活动</span>            <span id="modal-icon-cancel" class="modal-icon-cancel">x</span>        </div>        <div class="modal-main">            <form action="" method="post" id="modalData">                 <input type="hidden" value=""  name="id" id="id"/>                <div class="form-item">                    <label for="title">                        <span class="modal-label-icon">*</span>                        <span>标题:<span>                    </label>                    <input type="text" value=""  maxlength="20" name="title" id="title" class="modal-form-title modal-form-right"/>                </div>                <div class="form-item">                    <label for="time">                    <span class="modal-label-icon">*</span>                    <span>时间:<span>                    </label>                    <input type="date" value="" name="time" id="time"  class="modal-form-right modal-form-time"/>                    </div>                    <div class="form-item">                        <label for="status">                        <span class="modal-label-icon">*</span>                        <span>状态:<span>                        </label>                        <select name="status" id="status" class="modal-form-right modal-form-status">                            <option value="0">将要执行</option>                            <option value="1">已经执行</option>                            <option value="2">放弃执行</option>                            </select>                        </div>                    <div class="form-item">                        <label for="importance">                            <span class="modal-label-icon">*</span>                            <span>重要性:<span>                        </label>                        <select name="importance" id="importance" class="modal-form-right modal-form-importance">                            <option value="0">重要</option>                            <option value="1">一般</option>                        </select>                    </div>                    <div class="form-item">                        <label for="desc">详情:</label>                        <textarea type="textarea" value=""  maxlength="100" name="desc" id="desc" class="modal-form-desc modal-form-right"></textarea>                    </div>            <div class="modal-footer">                <a href="javascript:;" id="modalOk" class="modal-submit-btn">确定</a>                <a href="javascript:;" id="modalCancel" class="modal-cancel-btn">取消</a>                        </div>                    </form>                </div>        </div>    </div>

2、css实现如下：

.modal{    width: 100%;    height: 100%;    position:fixed;    top:0;    left:0;    right:0;    bottom:0;    z-index:100;    background:rgba(0,0,0,.2);    display:none;    text-align:center;    -webkit-box-orient: horizontal;    -webkit-box-pack: center;    -webkit-box-align: center;}.modal.show{    display: -webkit-box !important;}.modal-content{    position: relative;    width: 400px;    background: #fff;    margin: 0 auto;    border-radius: 7px;    font-size: 14px;    text-align: center;}.modal-header{    border-bottom: 1px solid #ddd;    padding: 10px 15px;    text-align: left; }.modal-icon-cancel{    float: right;    font-size: 15px;    color: #919191;    cursor:pointer;}.modal-label-icon{    color: #f04134;    padding-right: 5px;}.form-item{    overflow: hidden;    padding: 10px 0;}.form-item label{    float: left;    width: 30%;    line-height: 32px;    vertical-align: middle;    text-align: right;}.modal-form-right{    float: left;    border: 1px solid #ddd;    border-radius: 4px;    margin-left: 10px;}.modal-form-title{    padding: 6px 7px;}.modal-form-time{    padding: 4px 7px;}.modal-form-desc{    width: 50%;    height: 50px;    padding: 6px 7px;    border: 1px solid #ddd;    border-radius: 4px;}.modal-form-status{    height: 32px;}.modal-form-importance{    height: 32px;}.form-item input,.form-item select,.form-item textarea{    font-size: 14px;    background: #fff;}.modal-footer{    overflow: hidden;    padding: 10px 15px;    border-top: 1px solid #ddd;}.modal-cancel-btn{    float: right;    padding: 2px 10px;    margin-right: 5px;    background-color: #fff;    border: 1px solid #ddd;    border-radius: 5px;    text-decoration: none;    color: #f04134; }.modal-submit-btn{    float: right;    padding: 2px 10px;    background-color: #1e91ed;    border:1px solid #f8f8f8;    border-radius: 5px;    text-decoration: none;    color: #fff;}

注意如下代码是实现模态框在窗口中实现局中：
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box !important;

3、js实现模态框的操作

//清空表单数据function cleanModal(){    document.getElementById('id').value = '';    document.getElementById('title').value = '';    document.getElementById('desc').value = '';    document.getElementById('time').value = '';    document.getElementById('status').value = '0';    document.getElementById('importance').value = '0';}function writeModal(data){    document.getElementById('id').value = data.id;    document.getElementById('title').value = data.title;    document.getElementById('desc').value = data.desc;    document.getElementById('time').value = data.time;    document.getElementById('status').value = data.status;    document.getElementById('importance').value = data.importance;}//移除classfunction removeClass(element,className){    var classStr = element.getAttribute('class');    if(classStr !== '' && classStr !== null && classStr !== 'undefind'){        element.setAttribute('class',classStr.replace(className,'').trimLeft().trimRight())    }}//添加classfunction addClass(element,className){    var classStr = element.getAttribute('class');    if(classStr === '' && classStr === null && classStr === undefind){        element.setAttribute('class',className.trimLeft().trimRight())    }else{        element.setAttribute('class',(classStr+' '+className).trimLeft().trimRight());    }}function addTodo(){    var add = document.getElementById('add');    add.onclick = function(){        var modal = document.getElementsByClassName('modal')[0];        document.getElementById('modal-header-text').innerHTML = '添加活动';        var time = document.getElementById('time');        console.log(getTime("-",1));        time.value = getTime("-",0);        addClass(modal,'show');        var modalOk = document.getElementById('modalOk');        modalOk.onclick = function(){            var method = 'post';            var url = '../../src/controller/add.php';            var data = serializeForm('modalData');            ajax(method,url,data,function(result){                var addDatas = JSON.parse(result);                removeClass(modal,'show');                cleanModal();                notice(addDatas['status'],'add');                var todo = getLists(addDatas['data']);                var ul = document.getElementById('todolist');                ul.innerHTML = todo;            });         }        var modalCancel = document.getElementById('modalCancel');        modalCancel.onclick = function(){            removeClass(modal,'show');            cleanModal();        }        var modalIconCancel = document.getElementById('modal-icon-cancel');        modalIconCancel.onclick = function(){            removeClass(modal,'show');            cleanModal();        }    }}