# Contenu superposé

- Documentation
- Questions ou commentaires?

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

### Ouvrir de contenu superposé via JavaScript

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

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

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 vclick", "#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 popup-modal-dismiss" 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>

## Panneau à gauche

- Lien 1
- Lien 2
- Lien 3
- Lien 4
- Lien 5
- Lien 6

## Panneau à droit

- Lien 1
- Lien 2
- Lien 3
- Lien 4
- Lien 5
- Lien 6

## Barre en haut

## Barre en bas

## Contenu superposé centré (Lightbox)

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

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

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

## Contenu superposé mi-écran

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

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

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

## Contenu superposé plein écran

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

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

1. liste ordonnée (`ol`) premier niveau - apparence par défaut
2. liste ordonnée (`ol`) premier niveau - apparence par défaut
   1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
   2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
      1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
      2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

Lien - apparence par défaut

Date de modification :
  2014-07-22