这篇文章主要讲解了“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)
})
})感谢各位的阅读，以上就是“JQuery如何自定义模态框效果”的内容了，经过本文的学习后，相信大家对JQuery如何自定义模态框效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
