---
{
	"title": "Contenu superposé",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Un plugiciel fournissant un modèle de contenu superposé flexible et réactif.",
	"tag": "overlay",
	"parentdir": "overlay",
	"altLangPrefix": "overlay",
	"js": ["demo/overlay"],
	"css": ["demo/overlay"],
	"dateModified": "2014-07-22"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Un plugiciel fournissant un modèle de contenu superposé flexible et réactif.</p>
</section>

<section>
	<h2>Exemples</h2>
	<ul>
		<li>
			<p><a href="#panneau-gauche" aria-controls="panneau-gauche" class="overlay-lnk" role="button">Panneau à gauche</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#panneau-gauche&quot; aria-controls=&quot;panneau-gauche&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Panneau à gauche&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;panneau-gauche&quot; class=&quot;wb-overlay modal-content overlay-def wb-panel-l&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Panneau à gauche&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#panneau-droit" aria-controls="panneau-droit" class="overlay-lnk" role="button">Panneau à droit</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#panneau-droit&quot; aria-controls=&quot;panneau-droit&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Panneau à droit&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;panneau-droit&quot; class=&quot;wb-overlay modal-content overlay-def wb-panel-r&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Panneau à droit&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#barre-haut" aria-controls="barre-haut" class="overlay-lnk" role="button">Barre en haut</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#barre-haut&quot; aria-controls=&quot;barre-haut&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Barre en haut&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;barre-haut&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-t&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Barre en haut&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#barre-bas" aria-controls="barre-bas" class="overlay-lnk" role="button">Barre en bas</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#barre-bas&quot; aria-controls=&quot;barre-bas&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Barre en bas&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;barre-bas&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-b&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Barre en bas&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#cs-centre" aria-controls="cs-centre" class="wb-lbx" role="button">Contenu superposé centré (Lightbox)</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#cs-centre&quot; aria-controls=&quot;cs-centre&quot; class=&quot;wb-lbx&quot; role=&quot;button&quot;&gt;Contenu superposé centré (Lightbox)&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;cs-centre&quot; class=&quot;mfp-hide modal-dialog modal-content overlay-def&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Contenu superposé centré (Lightbox)&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<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>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#cs-centre-modal&quot; aria-controls=&quot;cs-centre-modal&quot; class=&quot;wb-lbx lbx-modal&quot; role=&quot;button&quot;&gt;Contenu superposé centré - Modal (Lightbox + Modal)&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;cs-centre-modal&quot; class=&quot;mfp-hide modal-dialog modal-content overlay-def&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Contenu superposé centré - Modal (Lightbox + Modal)&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#cs-mi-ecran" aria-controls="cs-mi-ecran" class="overlay-lnk" role="button">Contenu superposé mi-écran</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#cs-mi-ecran&quot; aria-controls=&quot;cs-mi-ecran&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Contenu superposé mi-écran&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;cs-mi-ecran&quot; class=&quot;wb-overlay modal-content overlay-def wb-popup-mid&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Contenu superposé mi-écran&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<p><a href="#cs-plein-ecran" aria-controls="cs-plein-ecran" class="overlay-lnk" role="button">Contenu superposé plein écran</a></p>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#cs-plein-ecran&quot; aria-controls=&quot;cs-plein-ecran&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Contenu superposé plein écran&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;cs-plein-ecran&quot; class=&quot;wb-overlay modal-content overlay-def wb-popup-full&quot;&gt;
	&lt;header class=&quot;modal-header&quot;&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Contenu superposé plein écran&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
		<li>
			<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>
			<details class="mrgn-bttm-lg">
				<summary>Visualiser le code</summary>
				<pre><code>&lt;p&gt;&lt;a href=&quot;#en-tete-cache&quot; aria-controls=&quot;en-tete-cache&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Contenu superposé plein écran - En-tête caché&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;en-tete-cache&quot; class=&quot;wb-overlay modal-content wb-popup-full hidden-hd&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;wb-inv&quot;&gt;Contenu superposé plein écran - En-tête caché&lt;/h2&gt;
	&lt;/header&gt;
	&lt;div class=&quot;modal-body&quot;&gt;
		...
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
			</details>
		</li>
	</ul>

	<section>
		<h3>Ouvrir de contenu superposé via JavaScript</h3>
		<p>Le contenu surperposé peut être ouverte via JavaScript avec&#160;:</p>
		<pre><code>$( "#overlayId" ).trigger( "open.wb-overlay" );</code></pre>
		<p>Pour un exemple d'ouvrir de contenu superposeé &#171;&#160;Lightbox&#160;&#187; via JavaScript, consultez <a href="../lightbox/lightbox-fr.html#examples5">Ouvrir de contenu superposé &#171;&#160;Lightbox&#160;&#187; via JavaScript</a>.</p>

		<label for="overlay-select">Contenu superposé à ouvrir</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>

		<section>
			<h4>Code</h4>
			<details>
				<summary>View code</summary>
				<section>
					<h5>HTML</h5>
					<pre><code>&lt;label for="overlay-select"&gt;Overlay to open&lt;/label&gt;
&lt;select id="overlay-select"&gt;
	&lt;option value="panneau-gauche"&gt;Panneau à gauche&lt;/option&gt;
	&lt;option value="panneau-droit"&gt;Panneau à droit&lt;/option&gt;
	&lt;option value="barre-haut"&gt;Barre en haut&lt;/option&gt;
	&lt;option value="barre-bas"&gt;Barre en bas&lt;/option&gt;
	&lt;option value="cs-mi-ecran"&gt;Contenu superposé mi-écran&lt;/option&gt;
	&lt;option value="cs-plein-ecran"&gt;Contenu superposé plein écran&lt;/option&gt;
	&lt;option value="en-tete-cache"&gt;Contenu superposé plein écran - En-tête caché&lt;/option&gt;
&lt;/select&gt;
&lt;button id="overlay-open-btn" type="button"&gt;Ouvrir le contenu superposé&lt;/button&gt;</code></pre>
						</section>

					<section>
						<h5>JavaScript</h5>
						<pre><code>(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 );</code></pre>
				</section>
			</details>
		</section>
	</section>

<div lang="en">
	<p><strong>Needs translation</strong></p>
	<section>
		<h3>Adding custom close buttons to overlays/modals</h3>
		<p>Overlays/Modals through JavaScript are automatically updated with a close overlay/modal button. This button can be changed with the following code:</p>
		<pre><code>&lt;div class=&quot;modal-footer&quot;&gt;
...
&lt;button class=&quot;btn btn-primary overlay-close&quot; type=&quot;button&quot;&gt;Close overlay/modal&lt;/button&gt;
&lt;/div&gt;</code></pre>
		<p><strong>Side Note:</strong> Close buttons must be inside the modal footer (a div with the class <code>modal-footer</code>).</p>
	</section>
</div>

	<section>
		<h3>Contenu superposé mi-écran avec arrière plan</h3>
		<p>Ajouter la classe CSS <code>overlay-bg</code> à la fenêtre superposé afin que le fenêtre se démarque avec un arrière plan noir.</p>
		<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>
		<details class="mrgn-bttm-lg">
			<summary>Visualiser le code</summary>
			<pre><code>&lt;p&gt;&lt;a href=&quot;#cs-mi-ecran-bg&quot; aria-controls=&quot;cs-mi-ecran-bg&quot; class=&quot;overlay-lnk&quot; role=&quot;button&quot;&gt;Contenu superposé mi-écran avec arrière plan&lt;/a&gt;&lt;/p&gt;

&lt;section id=&quot;cs-mi-ecran-bg&quot; class=&quot;wb-overlay modal-content overlay-def wb-popup-mid overlay-bg&quot;&gt;
&lt;header class=&quot;modal-header&quot;&gt;
	&lt;h2 class=&quot;modal-title&quot;&gt;Contenu superposé mi-écran avec arrière plan&lt;/h2&gt;
&lt;/header&gt;
&lt;div class=&quot;modal-body&quot;&gt;
	...
&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</details>
	</section>
</section>

<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">
		<ul class="list-unstyled">
			<li>
				<a href="#">Lien 1</a>
			</li>
			<li>
				<a href="#">Lien 2</a>
			</li>
			<li>
				<a href="#">Lien 3</a>
			</li>
			<li>
				<a href="#">Lien 4</a>
			</li>
			<li>
				<a href="#">Lien 5</a>
			</li>
			<li>
				<a href="#">Lien 6</a>
			</li>
		</ul>
	</div>
</section>

<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">
		<ul class="list-unstyled">
			<li>
				<a href="#">Lien 1</a>
			</li>
			<li>
				<a href="#">Lien 2</a>
			</li>
			<li>
				<a href="#">Lien 3</a>
			</li>
			<li>
				<a href="#">Lien 4</a>
			</li>
			<li>
				<a href="#">Lien 5</a>
			</li>
			<li>
				<a href="#">Lien 6</a>
			</li>
		</ul>
	</div>
</section>

<section id="barre-haut" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Barre en haut</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Bouton 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 3</button>
		</li>
	</ul>
</section>

<section id="barre-bas" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Barre en bas</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Bouton 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 3</button>
		</li>
	</ul>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>

<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">
		<ol>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
			<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
				<ol>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
					<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
						<ol>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
							<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
						</ol>
					</li>
				</ol>
			</li>
		</ol>
		<p><a href="#">Lien - apparence par défaut</a></p>
	</div>
</section>
