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