JQuery自定义模态框效果
作者：new_liu
这篇文章主要为大家详细介绍了JQuery自定义模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JQuery自定义模态框效果的具体代码，供大家参考，具体内容如下
重点：基于jQuery ，也可改造成原生模态框
功能：
1、可以自定义模态框的宽高等等一系列css样式；
2、关闭、提交都可以执行自定义的回调函数；
3、js和html分离，除了部分带了js功能的class不能遗漏之外，其他的都可自行增减
html代码：
<div class="dialog-tiya" id="voteModal"> <div class="modalBg-tiya"></div> <div class="customModal-tiya"> <div class="close"></div> <div class="modal-title"> 批量投票 </div> <div class="modal-body"> <p class="text-center color8bb7f9">是否批量开启所选队伍的投票？</p> </div> <div class="modal-footer"> <div class="button-refer">批量开启</div> <div class="button-cancel">批量关闭</div> </div> </div> </div>
css代码：
.dialog-tiya{
display:none;
}
.modalBg-tiya {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: fixed;
z-index: 2;
left: 0;
top: 0;
}
.customModal-tiya {
position: fixed;
width: 40%;
height: 50%;
z-index: 3;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border-radius: 5px;
padding: 15px;
box-sizing: border-box;
background: #fff;
}
.customModal-tiya .modal-title {
font-size: 18px;
margin: 40px auto;
color:#000;
text-align:center;
}
.customModal-tiya .modal-footer {
position: absolute;
bottom: 15px;
right: 15px;
left: 15px;
text-align: center;
}
.customModal-tiya .modal-footer .button-refer,
.customModal-tiya .modal-footer .button-cancel {
width: 40%;
height: 38px;
line-height: 38px;
text-align: center;
border:1px solid #6893ff;
font-size:16px;
border-radius: 5px;
display: inline-block;
}
.customModal-tiya .modal-footer .button-refer {
margin-right: 10px;
background: #6893ff;
color:#fff;
}
.customModal-tiya .modal-footer .button-cancel {
margin-left: 10px;
color:#6893ff;
}
.customModal-tiya .close{
position:absolute;
right:15px;
top:15px;
width: 22px;
height:22px;
background:#8bb7f9 url("../public/images/gb_icon.png") no-repeat;/*自己换icon*/
background-size:100% 100%;
cursor:pointer;
}
.customModal-tiya .modal-body{
font-size:18px;
}
.text-center{
text-align:center;
}
.color8bb7f9{
color:#8bb7f9;
}modal.js:
function CustomModal(ele,options,callback){
this.ele = ele;
this.init(ele,options,callback);
}
customModal.prototype.init = function(ele,options,callback){
ele.show();
if(options.style){
var target = ele.find(".customModal-tiya");
$.each(options.style,function(index,item){
target.css(index,item)
})
}
callback && callback();
if(options.close){
ele.find(".close").click(function(){
ele.hide();
options.close && options.close();
})
}
if(options.submit){
ele.find(".button-refer").click(function(){
ele.hide();
options.submit && options.submit();
})
}
if(options.cancel) {
ele.find(".button-cancel").click(function(){
ele.hide();
options.cancel && options.cancel();
})
}
}最后一步，调用：
$(function(){
var voteModal = new CustomModal($("#voteModal"),{
style:{
'min-height':'300px',
'min-width':'600px',
},
close:function(){
alert(2)
},
submit:function(){
alert(3)
},
cancel:function(){
alert(4)
}},function(){
alert(1)
})
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。