Contenu superposé

But

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

Exemples

Visualiser le code

<p><a href="#panneau-gauche" aria-controls="panneau-gauche" class="overlay-lnk" role="button">Panneau à gauche</a></p>

<section id="panneau-gauche" class="wb-overlay modal-content overlay-def wb-panel-l">
	<header class="modal-header">
		<h2 class="modal-title">Panneau à gauche</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Panneau à droit

Visualiser le code

<p><a href="#panneau-droit" aria-controls="panneau-droit" class="overlay-lnk" role="button">Panneau à droit</a></p>

<section id="panneau-droit" class="wb-overlay modal-content overlay-def wb-panel-r">
	<header class="modal-header">
		<h2 class="modal-title">Panneau à droit</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Barre en haut

Visualiser le code

<p><a href="#barre-haut" aria-controls="barre-haut" class="overlay-lnk" role="button">Barre en haut</a></p>

<section id="barre-haut" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Barre en haut</h2>
	</header>
	...
</section>

Barre en bas

Visualiser le code

<p><a href="#barre-bas" aria-controls="barre-bas" class="overlay-lnk" role="button">Barre en bas</a></p>

<section id="barre-bas" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Barre en bas</h2>
	</header>
	...
</section>

Contenu superposé centré (Lightbox)

Visualiser le code

<p><a href="#cs-centre" aria-controls="cs-centre" class="wb-lbx" role="button">Contenu superposé centré (Lightbox)</a></p>

<section id="cs-centre" class="mfp-hide modal-dialog modal-content overlay-def">
	<header class="modal-header">
		<h2 class="modal-title">Contenu superposé centré (Lightbox)</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Contenu superposé centré - Modal (Lightbox + Modal)

Visualiser le code

<p><a href="#cs-centre-modal" aria-controls="cs-centre-modal" class="wb-lbx lbx-modal" role="button">Contenu superposé centré - Modal (Lightbox + Modal)</a></p>

<section id="cs-centre-modal" class="mfp-hide modal-dialog modal-content overlay-def">
	<header class="modal-header">
		<h2 class="modal-title">Contenu superposé centré - Modal (Lightbox + Modal)</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Contenu superposé mi-écran

Visualiser le code

<p><a href="#cs-mi-ecran" aria-controls="cs-mi-ecran" class="overlay-lnk" role="button">Contenu superposé mi-écran</a></p>

<section id="cs-mi-ecran" class="wb-overlay modal-content overlay-def wb-popup-mid">
	<header class="modal-header">
		<h2 class="modal-title">Contenu superposé mi-écran</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Contenu superposé plein écran

Visualiser le code

<p><a href="#cs-plein-ecran" aria-controls="cs-plein-ecran" class="overlay-lnk" role="button">Contenu superposé plein écran</a></p>

<section id="cs-plein-ecran" class="wb-overlay modal-content overlay-def wb-popup-full">
	<header class="modal-header">
		<h2 class="modal-title">Contenu superposé plein écran</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

Contenu superposé plein écran - En-tête caché

Visualiser le code

<p><a href="#en-tete-cache" aria-controls="en-tete-cache" class="overlay-lnk" role="button">Contenu superposé plein écran - En-tête caché</a></p>

<section id="en-tete-cache" class="wb-overlay modal-content wb-popup-full hidden-hd">
	<header>
		<h2 class="wb-inv">Contenu superposé plein écran - En-tête caché</h2>
	</header>
	<div class="modal-body">
		...
	</div>
</section>

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.

Contenu superposé à ouvrir

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).