jquery.edbox.js是一款輕量級的jquery響應式模態視窗外掛。透過這個jquery模態視窗插件,你可以輕鬆的製作出響應式的,帶有動畫效果的,可基於AJAX的模態對話框效果。
它的特點還有:
可以透過CSS來改變模態視窗的樣式。
可以自訂模態視窗的頭部和腳部內容。
可以自訂載入的loading效果。
支援多種格式的內容:HTML,文本,圖片和AJAX內容等。
支援4種alert情境模式:success,info,warning 和 danger。
可自訂開啟和關閉模態視窗的動畫。
支援回呼方法。
安裝
可以透過npm或yarn來安裝jquery.edbox.js外掛程式。
npm install jquery.edbox
yarn add jquery.edbox
使用方法
在頁面中引入edbox.css檔,jquery和jquery.edbox.js檔。
<link href="dist/edbox.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/jquery.edbox.js"></script>
HTML結構
#最簡單的模態視窗的使用方法是使用一個
來作為模態視窗內容的容器,在它裡面可以放置HTML,文本,圖片和AJAX內容等。
<p id="target">模态窗口内容</p>
然後透過一個超連結或按鈕來觸發模態視窗。
<ahref="#"edbox data-box-target="#target">打开模态窗口</a>
初始化外掛
#在頁面DOM元素載入完畢之後,透過edbox();方法來初始化此模態窗口插件。
$('.trigger-link').edbox();
模態視窗中載入HTML,圖片和AJAX內容
在模態視窗中載入HTML內容的方法如下:在data -box-html屬性中填寫你的HTML內容即可。
<pid="target"data-box-html="<p class='example-html'>这是HTML内容</p>" >模态窗口内容</p>
$('.trigger-link').edbox();
新增圖片的方法如下:
<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>
$('.link-image').edbox({ image: 'curitiba-brazil.jpg' });
#新增AJAX內容的方法如下:
<!-- 使用 href 或者 data-box-url 属性 --> <a href="assets/html/curitiba.html" class="link-url">URL load example</a>
$('.link-url').edbox({ //add an extra class to the modal for an especific style addClass: 'example-url', width: 900 });
方法
jquery.edbox.js模態視窗外掛程式的可用方法有:
//set edbox for the set of matched elements $('.myModalLink').edbox({ options }); $('[edbox]').edbox({ options }); //Init without assigning any element $.edbox({ options }); //Make custom settings as defaults $.edboxSettings({ options }); //Close event $.edbox('close');
以上是關於jquery.edbox外掛的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!