關於jquery.edbox外掛的使用方法

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結構

#最簡單的模態視窗的使用方法是使用一個e388a4556c0f65e1904146cc1a846bee來作為模態視窗內容的容器，在它裡面可以放置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=&#39;example-html&#39;>这是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中文網其他相關文章！