Contenu superposé

But

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

Exemples

• Panneau à gauche

  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>

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

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

(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 );

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

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