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;
}
//移除class
function removeClass(element,className){
    var classStr = element.getAttribute('class');
    if(classStr !== '' && classStr !== null && classStr !== 'undefind'){
        element.setAttribute('class',classStr.replace(className,'').trimLeft().trimRight())
    }
}
//新增class
function 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();
        }
    }
}