怎么使用iziModal

本篇內(nèi)容介紹了“怎么使用iziModal”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　iziModal是一款時(shí)尚炫酷的jQuery模態(tài)窗口插件。該模態(tài)窗口插件提供基本的打開(kāi)模態(tài)窗口動(dòng)畫特效，并且可以調(diào)用iframe內(nèi)容，Ajax加載，制作alert效果，加載超大內(nèi)容等。

　　iziModal安裝

　　npm

　　npminstallizimodal--save

　　bower

　　bowerinstallizimodal--save

　　GEM

　　geminstallizimodal

　　iziModal是一款基于jQuery的彈窗模態(tài)插件，具有優(yōu)雅、響應(yīng)快速、靈活輕便的特性，很是炫酷。該模態(tài)彈窗插件不僅支持動(dòng)畫特效，而且還支持多種調(diào)用方式，如：支持iframe調(diào)用，Ajax異步加載，制作alert效果，支持大內(nèi)容加載等。

　　iziModal使用方法

　　在網(wǎng)頁(yè)中引入jQuery和iziModal對(duì)應(yīng)的JS和CSS文件。

　　1.<linkrel="stylesheet"href="css/iziModal.min.css">

　　2.<scriptsrc="js/jquery.min.js"type="text/javascript"></script>

　　3.<scriptsrc="js/iziModal.min.js"type="text/javascript"></script>

　　HTML代碼(部分)

　　假設(shè)我們使用<a>標(biāo)簽打開(kāi)模態(tài)彈窗。

　　1.<!--a標(biāo)簽添加trigger樣式，方便后邊獲取句柄-->

　　2.<ahref="#"class="trigger">打開(kāi)模態(tài)窗口</a>

　　3.<!--這里模態(tài)窗口-->

　　4.<divid="modal">

　　5.<!--模態(tài)窗口的內(nèi)容-->

　　6.</div>

　　JavaScript腳本初始化

　　方式一：在DOM元素加載完畢之后，直接通過(guò)iziModal()方法來(lái)初始化模態(tài)窗口。

　　1.$("#modal").iziModal();

　　方式二：使用jQuery事件來(lái)打開(kāi)模態(tài)窗口。

　　1.$(document).on('click','.trigger',function(event){

　　2.event.preventDefault();

　　3.$('#modal').iziModal('open',this);//注意這里的this對(duì)象

　　4.});

“怎么使用iziModal”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！