HTML, CSS et jQuery : créez une interface avec des pop-ups de notification-js tutoriel-php.cn

HTML, CSS et jQuery : créez une interface avec des pop-ups de notification

王林

Libérer： 2023-10-26 12:34:54

original

1390 Les gens l'ont consulté

HTML, CSS et jQuery : créez une interface avec des pop-ups de notification

HTML, CSS et jQuery : Créez une interface avec des pop-ups de notification

Introduction :
Dans la conception Web moderne, les pop-ups de notification sont un élément très courant. Il peut être utilisé pour afficher des informations importantes aux utilisateurs ou pour inviter les utilisateurs à effectuer certaines opérations. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une interface avec une fenêtre contextuelle de notification et joindra des exemples de code spécifiques.

1. Structure HTML
Tout d'abord, nous devons utiliser HTML pour construire la structure de base de la page. Voici un exemple de code HTML requis pour une fenêtre pop-up de notification :

<!DOCTYPE html>
<html>
<head>
    <title>通知弹窗示例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <h1>通知弹窗示例</h1>
    <button id="showNotification">显示通知</button>

    <div id="notificationContainer">
        <div id="notificationContent">
            <p id="notificationMessage"></p>
            <button id="closeNotification">关闭</button>
        </div>
    </div>
</body>
</html>

Copier après la connexion

Dans cet exemple, nous utilisons une balise h1 pour afficher le titre de la page et ajoutons un bouton pour déclencher l'affichage de la pop-up de notification. fenêtre ouverte. La fenêtre contextuelle de notification elle-même est un élément div situé dans le conteneur notificationContainer et contient un élément p qui affiche le contenu de la notification et un bouton de fermeture.

2. Style CSS
Ensuite, nous devons utiliser CSS pour embellir l'apparence de la fenêtre contextuelle de notification. Voici un exemple de code CSS pertinent :

#notificationContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: none;
}

#notificationContent {
    text-align: center;
}

#notificationMessage {
    font-size: 18px;
    margin-bottom: 10px;
}

#closeNotification {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

#closeNotification:hover {
    background-color: #0056b3;
}

Copier après la connexion

Dans cet exemple, nous définissons le conteneur (notificationContainer) de la fenêtre pop-up de notification à une position fixe, de sorte qu'il soit situé au centre de la page verticalement et horizontalement. Nous définissons également certains styles de base, tels que la couleur d'arrière-plan, les coins arrondis, l'ombre, etc. Le texte du contenu de la notification (notificationContent) est centré et aligné, et certains styles de texte et de boutons sont définis.

3. Interaction jQuery
Enfin, nous devons utiliser jQuery pour réaliser l'interaction des fenêtres contextuelles de notification. Voici un exemple de code JavaScript pertinent :

$(document).ready(function() {
    $("#showNotification").click(function() {
        $("#notificationContainer").fadeIn();
    });

    $("#closeNotification").click(function() {
        $("#notificationContainer").fadeOut();
    });
});

Copier après la connexion

Dans cet exemple, nous utilisons la fonction .ready() pour garantir que le code pertinent est exécuté après le chargement de la page. Lorsque l'on clique sur le bouton qui affiche la notification (showNotification), nous utilisons la fonction .fadeIn() pour afficher la fenêtre contextuelle de notification. Lorsque l'on clique sur le bouton de fermeture (closeNotification), nous utilisons la fonction .fadeOut() pour masquer la fenêtre contextuelle de notification.

Résumé :
Grâce à la coopération de HTML, CSS et jQuery, nous pouvons facilement créer une interface avec une fenêtre contextuelle de notification. Les fenêtres contextuelles de notification peuvent être utilisées pour afficher des informations importantes aux utilisateurs ou les inviter à effectuer certaines opérations. J'espère que l'exemple de code de cet article pourra aider les lecteurs à mieux comprendre et appliquer ces techniques.

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!