欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年07月05日 08:03:38   作者:new_liu  
這篇文章主要為大家詳細(xì)介紹了JQuery自定義模態(tài)框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

重點(diǎn):基于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">是否批量開(kāi)啟所選隊(duì)伍的投票?</p>
? ? ? ? </div>
? ? ? ? <div class="modal-footer">
? ? ? ? ? ? <div class="button-refer">批量開(kāi)啟</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)
? ? })
})

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

相關(guān)文章

最新評(píng)論