JQuery自定義模態框效果

2022-07-05 10:01:06

本文範例為大家分享了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)
    })
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JQuery自定義模態框效果

熱門文章