Comment concevoir une fenêtre pop-up avec JavaScript

Les fenêtres contextuelles sont l'un des éléments interactifs courants dans la conception Web moderne. Elles peuvent être utilisées pour inviter les utilisateurs, afficher du contenu ou guider les utilisateurs dans leurs opérations. Javascript est un langage indispensable dans la conception Web moderne. Les fenêtres contextuelles peuvent être conçues via Javascript. Ci-dessous, nous expliquerons comment utiliser Javascript pour concevoir des fenêtres contextuelles.

1. Structure HTML

La fenêtre contextuelle doit d'abord avoir une structure HTML, qui peut être implémentée en sélectionnant des balises telles que div et section. À l’intérieur de cette balise, vous pouvez ajouter le contenu qui doit être affiché.

La structure HTML est la suivante :

<div class="dialog-box">
    <div class="dialog-content">这里填写需要展示的内容</div>
    <button class="close-btn">X</button>
</div>

2. Style CSS

Le style CSS est utilisé pour définir l'apparence de la fenêtre contextuelle. Certains styles de base doivent être définis, tels que la largeur, la hauteur, le positionnement, etc. . de la fenêtre contextuelle. De plus, vous devez également définir l'état initial de la fenêtre contextuelle sur l'état masqué.

Le style CSS est le suivant :

.dialog-box{
    width: 400px;
    height: 300px;
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
    display: none;
}
.dialog-content{
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}
.close-btn{
    position: absolute;
    top: 5px;
    right: 5px;
}

3. Code Javascript

Une fois la structure HTML et le style CSS de la fenêtre contextuelle définis, Javascript peut être utilisé pour afficher et masquer la fenêtre contextuelle.

Tout d'abord, vous devez récupérer les éléments de la fenêtre contextuelle et définir les styles d'affichage et de masquage.

Le code Javascript est le suivant :

var dialogBox = document.querySelector('.dialog-box');
var closeBtn = document.querySelector('.close-btn');

function showDialogBox(){
    dialogBox.style.display = 'block';
}
function hideDialogBox(){
    dialogBox.style.display = 'none';
}

Ensuite, vous devez ajouter des événements de clic au bouton d'ouverture et au bouton de fermeture de la fenêtre contextuelle. Lorsque l'utilisateur clique sur ces boutons, la fenêtre contextuelle s'ouvre ou se ferme. par conséquent.

Le code Javascript est le suivant :

var openBtn = document.querySelector('.open-btn');

openBtn.addEventListener('click',showDialogBox);
closeBtn.addEventListener('click',hideDialogBox);

Ce qui précède est le processus de base d'utilisation de Javascript pour concevoir des fenêtres contextuelles. En utilisation réelle, nous pouvons ajouter et modifier le code en fonction de besoins spécifiques pour obtenir des effets pop-up plus complexes et plus riches.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!