JQuery如何自定义模态框效果

这篇文章主要讲解了“Jquery如何自定义模态框效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JQuery如何自定义模态框效果”吧！

重点：基于jQuery ，也可改造成原生模态框

功能：

可以自定义模态框的宽高等等一系列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;    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如何自定义模态框效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！