JQuery自定義模態(tài)框效果

更新時間：2022年07月05日 08:03:38 作者：new_liu

這篇文章主要為大家詳細(xì)介紹了JQuery自定義模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JQuery自定義模態(tài)框效果的具體代碼，供大家參考，具體內(nèi)容如下

重點：基于jQuery ，也可改造成原生模態(tài)框

功能：

1、可以自定義模態(tài)框的寬高等等一系列css樣式；
2、關(guān)閉、提交都可以執(zhí)行自定義的回調(diào)函數(shù)；
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">批量關(guān)閉</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();
? ? ? ? })
? ? }
}

最后一步，調(diào)用：

$(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)
? ? })
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: