About how to use the jquery.edbox plug-in-JS Tutorial-php.cn

About how to use the jquery.edbox plug-in

零到壹度

Release： 2018-03-28 16:44:05

Original

1979 people have browsed it

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>

Copy after login

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>

Copy after login

Then trigger the modal window through a hyperlink or button.

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

Copy after login

Initialization plug-in

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

$(&#39;.trigger-link&#39;).edbox();

Copy after login

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>

Copy after login

$(&#39;.trigger-link&#39;).edbox();

Copy after login

The method of adding pictures is as follows:

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

Copy after login

$(&#39;.link-image&#39;).edbox({
  image: &#39;curitiba-brazil.jpg&#39;
});

Copy after login

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>

Copy after login

$(&#39;.link-url&#39;).edbox({
  //add an extra class to the modal for an especific style
  addClass: &#39;example-url&#39;,
  width: 900
});

Copy after login

Method

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

//set edbox for the set of matched elements
$(&#39;.myModalLink&#39;).edbox({ options });
$(&#39;[edbox]&#39;).edbox({ options });
 
//Init without assigning any element
$.edbox({ options });
 
//Make custom settings as defaults
$.edboxSettings({ options });
 
//Close event
$.edbox(&#39;close&#39;);

Copy after login

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!