JQuery自定義模態(tài)框效果
本文實(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)文章
JavaScript中的apply和call函數(shù)詳解
本文是翻譯Function.apply and Function.call in JavaScript,希望對(duì)大家有所幫助2014-07-07利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息
本篇文章主要介紹了利用JQuery制作符合Web標(biāo)準(zhǔn)的QQ彈出消息。這里所說(shuō)的彈出消息指的是在網(wǎng)頁(yè)右下角升起又下去的那種框框,在這里用到了jQuery的自定義動(dòng)畫(huà)2014-01-01jquery實(shí)現(xiàn)點(diǎn)擊展開(kāi)列表同時(shí)隱藏其他列表
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊展開(kāi)列表同時(shí)隱藏其他列表的方法,涉及jquery鼠標(biāo)事件及節(jié)點(diǎn)的遍歷與屬性操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)全屏滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全屏滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08jQuery訪問(wèn)json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問(wèn)json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時(shí)設(shè)置多個(gè)樣式的方法,實(shí)例分析了jQuery中css方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jquery js 獲取時(shí)間差、時(shí)間格式具體代碼
獲取獲得時(shí)間差、時(shí)間格式的方法有很多,下面為大家介紹下使用jquery及js實(shí)現(xiàn)的功能代碼2013-06-06jQuery通用的全局遍歷方法$.each()用法實(shí)例
這篇文章主要介紹了jQuery通用的全局遍歷方法$.each()用法,結(jié)合實(shí)例形式分析了$.each()方法實(shí)現(xiàn)遍歷功能的相關(guān)技巧,需要的朋友可以參考下2016-07-07