Modal - EO Framework

Le module utilise la classe : .wpeo-modal

<div class="parent-container">

	<!-- Le bouton déclenchant louverture de la popup -->
	<a class="wpeo-button button-main wpeo-modal-event"
		data-parent="parent-container"
		data-target="wpeo-modal"><i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span></a>

	<!-- Structure -->
	<div class="wpeo-modal">
		<div class="modal-container">

			<!-- Entête -->
			<div class="modal-header">
				<h2 class="modal-title">Titre de la popup</h2>
				<div class="modal-close"><i class="fal fa-times"></i></div>
			</div>

			<!-- Corps -->
			<div class="modal-content">
				<p>...</p>
			</div>

			<!-- Footer -->
			<div class="modal-footer">
				<a class="wpeo-button button-grey button-uppercase modal-close"><span>Annuler</span></a>
				<a class="wpeo-button button-main button-uppercase modal-close"><span>Valider</span></a>
			</div>
		</div>
	</div>
</div>

Ajouter la classe "modal-active" sur « wpeo-modal » permet de faire apparaître la modal

<div class="wpeo-modal modal-active">
...
</div>

Bouton déclenchant l'ouverture d'une modal

<div class="wpeo-button button-main wpeo-modal-event"
	data-parent="parent-container"
	data-target="wpeo-modal">
	<i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span>
</div>

Bouton déclenchant l'ouverture d'une modal avec une requête AJAX

<div class="wpeo-button button-main wpeo-modal-event"
	data-action="load_modal_content">
	<i class="button-icon fal fa-hand-pointer"></i> <span>Cliquer pour ouvrir la modal</span>
</div>

Les attributs du bouton

data-action: permet de lancer une action en AJAX.
data-title: permet de définir le titre de la modal.
data-parent: permet de définir le contenaire parent, cet attribut est obligatoire pour utiliser data-target.
data-target: permet de cibler la modal définie dans la vue, cet attribute doit être utiliser avec data-parent.

Envoyer des données en AJAX

Tous les data-* dans le bouton sont envoyés dans la requête AJAX déclenché par le bouton

En savoir plus sur la gestion des modal en AJAX.