怎么使用iziModal

本篇內容介紹了“怎么使用iziModal”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　iziModal是一款時尚炫酷的jQuery模態窗口插件。該模態窗口插件提供基本的打開模態窗口動畫特效，并且可以調用iframe內容，Ajax加載，制作alert效果，加載超大內容等。

　　iziModal安裝

　　npm

　　npminstallizimodal--save

　　bower

　　bowerinstallizimodal--save

　　GEM

　　geminstallizimodal

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

　　iziModal使用方法

　　在網頁中引入jQuery和iziModal對應的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代碼(部分)

　　假設我們使用<a>標簽打開模態彈窗。

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

　　2.<ahref="#"class="trigger">打開模態窗口</a>

　　3.<!--這里模態窗口-->

　　4.<divid="modal">

　　5.<!--模態窗口的內容-->

　　6.</div>

　　JavaScript腳本初始化

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

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

　　方式二：使用jQuery事件來打開模態窗口。

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

　　2.event.preventDefault();

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

　　4.});

“怎么使用iziModal”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！