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