JavaScript Pop Up un élément Div au centre de la page Web
- Styliser une fenêtre contextuelle en HTML
- Ouvrir et fermer une fenêtre contextuelle en JavaScript
- Ouvrir et fermer une fenêtre contextuelle à l’aide de jQuery
Dans cet article de didacticiel, nous expliquerons comment ouvrir une fenêtre contextuelle au centre de la page Web.
Une fenêtre contextuelle 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 de l’utilisation d’une fenêtre contextuelle consiste à se concentrer sur certaines informations plutôt que sur l’ensemble du contenu, par exemple en invitant un utilisateur à confirmer. Alternativement, une fenêtre contextuelle est également appelée Modal.
Styliser une fenêtre contextuelle en HTML
Le style d’un pop-up est important pour la seule raison que vous voulez qu’il s’affiche au-dessus du contenu principal ou, du moins, qu’elle donne l’illusion de se trouver au-dessus du contenu principal :
<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: #fff;
background: white;
}
</style>
<title>Document</title>
</head>
<body>
<div class="overlay">
<div class="popup">
<div onclick="CloseModal()">✖</div> <!-- Shows Close Icon -->
<h3>Popup Content</h3>
</div>
</div>
<button onclick="OpenModal()">Show PopUp</button>
</body>
</html>
Donc, dans cet exemple simple, nous avons créé un bouton qui sera utilisé pour afficher 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.
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 des utilisateurs car ce sera la seule chose qu’un utilisateur pourra voir clairement. Mais un petit avertissement au cas où vous l’auriez manqué, l’élément overlay est défini sur none, donc il s’affiche maintenant pour le moment.
Par conséquent, la question est de savoir comment activer 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 d’un popup, nous pouvons le faire en accédant à l’élément DOM puis à sa propriété style, puis en changeant le type display de none à block fera apparaître le popup en haut. De même, nous pourrions le remettre à none une fois que l’utilisateur a cliqué sur l’icône de fermeture. Voyons cela avec 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();
}
Dans cet exemple, nous avons utilisé les méthodes show et hide de jQuery. 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.
Remarque : le show ne fonctionne qu’avec display:none ou les éléments masqués avec le jQuery. Cela ne fonctionne pas avec la propriété visibility de CSS.
De plus, assurez-vous d’ajouter le CDN jQuery dans l’en-tête (ou installez le package jQuery) lorsque vous utilisez jQuery.