JavaScript Popup un élément Div au centre de la page Web
- Qu’est-ce qu’un popup
- Styliser un Popup
- Ouvrir et fermer une fenêtre contextuelle en JavaScript
- Ouvrir et fermer une fenêtre contextuelle à l’aide de jQuery
Ce tutoriel abordera comment ouvrir une fenêtre pop au centre de la page Web. Pour commencer, nous avons les questions suivantes à traiter dans cet article :
- Qu’est-ce qu’un popup
- Styliser une popup
- Ouvrir et fermer le popup en JavaScript
- Ouvrir et fermer une fenêtre contextuelle à l’aide de jQuery
Qu’est-ce qu’un popup
Un popup est une petite fenêtre ou une petite boîte qui s’ouvre sur une fenêtre au-dessus du contenu sous-jacent.
Le principal cas d’utilisation d’une fenêtre contextuelle consiste à se concentrer sur certaines informations plutôt que sur l’ensemble du contenu, en invitant l’utilisateur à confirmer. Alternativement, une fenêtre contextuelle est également appelée Modal.
Styliser un Popup
Le style d’un popup est important pour la seule raison que vous voulez qu’il s’affiche au-dessus du contenu principal ou au moins doit donner l’illusion qu’il est au-dessus du contenu principal. Nous allons voir comment procéder avec l’exemple ci-dessous :
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
}
.overlay {
position: absolute;
display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
.popup {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
text-align: center;
background: white;
}
.popup h3 {
font-size: 15px;
height: 50px;
line-height: 50px;
color: black;
}
.CloseIcon{
cursor: pointer;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay" id="overlay">
<div class="popup">
<div onclick="CloseModal()" class="CloseIcon">✖</div>
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
Dans cet exemple simple, nous avons créé un bouton qui affichera la fenêtre contextuelle. Mais surtout, nous avons un élément overlay qui sera surtout du contenu dans une légère couleur noire, rendant ainsi difficile pour l’utilisateur de voir ce contenu.
Ensuite, nous avons créé un élément popup et l’avons stylisé pour qu’il vienne au-dessus de l’élément overlay et au centre de la page Web. Ce faisant, nous avons réussi à masquer le contenu principal.
Lorsqu’une fenêtre contextuelle s’ouvre au milieu de l’écran, elle attirera l’attention de l’utilisateur car ce sera la seule chose qu’un utilisateur verra clairement. Mais l’élément overlay est défini sur none, il n’apparaît donc pas pour le moment.
La question est, comment basculer une fenêtre contextuelle ? Nous pouvons le faire en utilisant JavaScript ou jQuery. Discutons des deux en détail ci-dessous.
Ouvrir et fermer une fenêtre contextuelle en JavaScript
Nous pouvons utiliser JavaScript pour basculer la propriété de style popup ; nous pouvons le faire en accédant à l’élément DOM et à sa propriété style et en changeant le type display de none à block fera apparaître la fenêtre contextuelle.
De même, nous pourrions revenir à none une fois que l’utilisateur a cliqué sur l’icône de fermeture. Illustrons cela par un exemple.
function OpenModal() {
let element = document.getElementById('overlay')
element.style.display = 'block'
}
function CloseModal() {
let element = document.getElementById('overlay')
element.style.display = 'none'
}
Ouvrir et fermer une fenêtre contextuelle à l’aide de jQuery
Alternativement, nous pourrions répéter la même chose avec jQuery. Examinons le code source et les modifications requises.
function OpenModal() {
$('#overlay').show();
}
function CloseModal() {
$('#overlay').hide();
}
Nous avons utilisé la méthode jQuery show et hide dans cet exemple. Au lieu de changer la propriété de display de none à block, show supprimez la propriété display sur element, et de même, le hide définit la propriété display sur none.
Note : Le
showne fonctionne qu’avecdisplay:noneou les éléments cachés avec le jQuery ; il ne fonctionne pas avec la propriétévisibilityde CSS.
De plus, assurez-vous d’ajouter le CDN jQuery dans l’en-tête (ou installez le package jQuery) lorsque vous utilisez jQuery.