JQuery如何自定义模态框效果

这篇文章主要讲解了“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如何自定义模态框效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！