.
<
o
*
<
@
}

NOUS LES DEVS

Popup

Créer une fenêtre modal en quelques lignes

Niveau : débutant(e)
</> </> </>

Popup natif

Pour construire une popup personnalisée, tu n’es pas obligé d’utiliser un framework ou un plugin. Je vais te montrer comment réaliser une popup avec un tout petit peu d’HTML, de CSS et une larmette de JavaScript.

Le code HTML

Au niveau du code HTML, c’est tout bête, je vais simplement avoir une balise div avec l’identifiant modal dans laquelle je place deux autres div, une qui aura la classe mask et une qui aura la classe container. La première va servir à avoir un fond semi-opaque sur tout le site lorsque la popup sera ouverte. Ce masque doit être placé de cette manière afin de ne pas avoir de transparence sur le contenu qui lui, sera placé dans la seconde div. Dans ce container, j’ajoute une div avec la classe message afin de pouvoir changer dynamiquement le contenu, ainsi qu’un lien qui permettra d’avoir un élément visuel (ici une croix) pour fermer la popup.

<div id="modal">
	<div class="mask"></div>
	<div class="container auto">
		<div class="message"></div>
		<a href="#" class="close">&times;</a>
	</div>
</div>

Le code CSS

Pour le CSS, je vais procéder par étapes. D’abord la div#modal, c’est un élément qui aura besoin des règles ci-dessous pour prendre toute la place à l’écran et pour qu’aucun autres éléments ne passent par devant.

Tu remarqueras également que j’ai masqué la popup via un « display:none; » car par défaut elle ne doit pas être visible par l’utilisateur. Je vais me servir d’une classe, en l’occurrence open, pour définir si la popup doit être visible ou non. J’ajoute donc la règle « display:block; » lorsque la modal à cette classe.

#modal{
	position: fixed;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
#modal.open{
	display: block;
}

Ensuite le masque. Je veux qu’il prenne toute la fenêtre et qu’il soit noir, mais avec une légère opacité pour voir au travers.

#modal .mask{
	background: black;
	opacity: 0.8;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

Le container quant à lui sera placé de telle sorte qu’il soit centré en largeur et en hauteur par rapport à la fenêtre. J’ai également fixé la largeur et défini un minima pour la hauteur.

#modal .container{
	position: relative;
	background: white;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 300px;
	height: auto;
	min-height: 50px;
}

Pour mon message, juste un peu de padding afin d’harmoniser l’affichage et pour ne pas que le texte soit collé au bord.

#modal .container .message{
	padding: 5% 15% 5% 5%;
}

Pour le lien de fermeture, rien de sorcier, je le place en haut à droite, et j’ajoute simplement un sélecteur :hover afin de mettre en avant la croix lorsque l’utilisateur met sa souris dessus.

#modal .container a.close{
	position: absolute;
	right: 5%;
	top:5%;
	color: #444;
	font-size: 30px;
}
#modal .container a.close:hover{		
	color: black;
}

Le code JavaScript

Pour ouvrir la popup, un peu de jQuery.

$(".bouton").click(function(){
	$("#modal .message").html("Contenu de ma modal");
	$("#modal").addClass("open");
});

Et pour fermer la popup, il suffit d’ajouter un événement sur le clic du masque et sur la croix.

$("#modal .mask, #modal a.close").click(function(){
	$("#modal").removeClass("open");
	return false;
});

Sans jQuery

Voici un exemple sans jQuery.

<a href="#" onclick="function open_mod(){var modal = document.getElementById('modal'); modal.getElementsByClassName('message')[0].innerHTML = 'Exemple'; modal.className += 'open';} open_mod(); return false;">Exemple</a>

DEMO

01/04/2016

Yann Vangampelaere - nouslesdevs -

NOUS LES DEVS

Vous aimez ce que je fais ? Vous voulez que j'en fasse plus ? dans le développement du blog.