Contenu superposé

But

Un plugiciel fournissant un modèle de contenu superposé flexible et réactif.

Exemples

Ouvrir de contenu superposé via JavaScript

Le contenu surperposé peut être ouverte via JavaScript avec :

$( "#overlayId" ).trigger( "open.wb-overlay" );

Pour un exemple d'ouvrir de contenu superposeé « Lightbox » via JavaScript, consultez Ouvrir de contenu superposé « Lightbox » via JavaScript.

Code

View code
HTML
<label for="overlay-select">Overlay to open</label>
<select id="overlay-select">
	<option value="panneau-gauche">Panneau à gauche</option>
	<option value="panneau-droit">Panneau à droit</option>
	<option value="barre-haut">Barre en haut</option>
	<option value="barre-bas">Barre en bas</option>
	<option value="cs-mi-ecran">Contenu superposé mi-écran</option>
	<option value="cs-plein-ecran">Contenu superposé plein écran</option>
	<option value="en-tete-cache">Contenu superposé plein écran - En-tête caché</option>
</select>
<button id="overlay-open-btn" type="button">Ouvrir le contenu superposé</button>
JavaScript
(function( $, wb ) {
"use strict";

wb.doc.on( "click", "#overlay-open-btn", function( event ) {
	if ( event.stopPropagation ) {
		event.stopImmediatePropagation();
	} else {
		event.cancelBubble = true;
	}

	$( "#" + $( "#overlay-select" ).val() ).trigger( "open.wb-overlay" );
});

})( jQuery, wb );

Needs translation

Adding custom close buttons to overlays/modals

Overlays/Modals through JavaScript are automatically updated with a close overlay/modal button. This button can be changed with the following code:

<div class="modal-footer">
...
<button class="btn btn-primary overlay-close" type="button">Close overlay/modal</button>
</div>

Side Note: Close buttons must be inside the modal footer (a div with the class modal-footer).

Contenu superposé mi-écran avec arrière plan

Ajouter la classe CSS overlay-bg à la fenêtre superposé afin que le fenêtre se démarque avec un arrière plan noir.

Contenu superposé mi-écran avec arrière plan

Visualiser le code
<p><a href="#cs-mi-ecran-bg" aria-controls="cs-mi-ecran-bg" class="overlay-lnk" role="button">Contenu superposé mi-écran avec arrière plan</a></p>

<section id="cs-mi-ecran-bg" class="wb-overlay modal-content overlay-def wb-popup-mid overlay-bg">
<header class="modal-header">
	<h2 class="modal-title">Contenu superposé mi-écran avec arrière plan</h2>
</header>
<div class="modal-body">
	...
</div>
</section>
Date de modification :