À propos de l'utilisation du plug-in jquery.edbox

jquery.edbox.js est un plug-in léger de fenêtre modale réactif jquery. Avec ce plug-in de fenêtre modale jquery, vous pouvez facilement créer des effets de dialogue modaux réactifs, animés et basés sur AJAX.

Ses fonctionnalités incluent :

Vous pouvez changer le style de la fenêtre modale via CSS.

Vous pouvez personnaliser le contenu de l'en-tête et du pied de page de la fenêtre modale.

Vous pouvez personnaliser l'effet de chargement.

Prend en charge le contenu dans plusieurs formats : HTML, texte, images et contenu AJAX, etc.

Prend en charge 4 modes de scénario d'alerte : succès, information, avertissement et danger.

Animation personnalisable pour l'ouverture et la fermeture des fenêtres modales.

Prise en charge des méthodes de rappel.

Installation

Vous pouvez installer le plug-in jquery.edbox.js via npm ou Yarn.

npm installer jquery.edbox

yarn ajouter jquery.edbox                                                                                      Présentez edbox.c fichier ss, fichiers jquery et jquery.edbox.js.

Structure HTML

La façon la plus simple d'utiliser une fenêtre modale est d'utiliser un

conteneur de contenu, dans lequel du HTML, du texte, des images, du contenu AJAX, etc. peuvent être placés.

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

Déclenchez ensuite la fenêtre modale via un lien hypertexte ou un bouton.

Plug-in d'initialisation

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

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

Une fois l'élément DOM de la page chargé, initialisez le module via edbox() ; méthode Plug-in de fenêtre dynamique.

Chargement du contenu HTML, des images et AJAX dans la fenêtre modale

La méthode de chargement du contenu HTML dans la fenêtre modale est la suivante suit : remplissez simplement votre contenu HTML dans l'attribut data-box-html.

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

La méthode d'ajout d'images est la suivante :

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

La méthode d'ajout de contenu AJAX est la suivante :

$('.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'
});

Méthodes

<!-- 使用 href 或者 data-box-url 属性 -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>

Les méthodes disponibles du plug-in de fenêtre modale jquery.edbox.js sont :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!