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中文網其他相關文章！
