About how to use the jquery.edbox plug-in

jquery.edbox.js is a lightweight jquery responsive modal window plug-in. With this jquery modal window plug-in, you can easily create responsive, animated, and AJAX-based modal dialog effects.

Its features include:

You can change the style of the modal window through CSS.

You can customize the head and foot content of the modal window.

You can customize the loading effect.

Supports content in multiple formats: HTML, text, images and AJAX content, etc.

Supports 4 alert scenario modes: success, info, warning and danger.

The animation for opening and closing the modal window can be customized.

Support callback methods.

Installation

You can install the jquery.edbox.js plug-in through npm or yarn.

npm install jquery.edbox

yarn add jquery.edbox            

## How to use

on the page Introduce the edbox.css file, jquery and jquery.edbox.js files.

<link href="dist/edbox.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.edbox.js"></script>

HTML structure

The simplest way to use a modal window is to use a

as the modal window content Container, in which HTML, text, images and AJAX content can be placed.

<p id="target">模态窗口内容</p>

Then trigger the modal window through a hyperlink or button.

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>

Initialization plug-in

After the page DOM element is loaded, initialize the modal window through the edbox(); method plugin.

$('.trigger-link').edbox();

Loading HTML, pictures and AJAX content in the modal window

The method of loading HTML content in the modal window is as follows: in data Just fill in your HTML content in the -box-html attribute.

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>

$('.trigger-link').edbox();

The method of adding pictures is as follows:

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

$('.link-image').edbox({
  image: 'curitiba-brazil.jpg'
});

The method of adding AJAX content is as follows:

<!-- 使用 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
});

Method

The available methods of jquery.edbox.js modal window plug-in are:

//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');

The above is the detailed content of About how to use the jquery.edbox plug-in. For more information, please follow other related articles on the PHP Chinese website!