fenêtre de modification contextuelle jquery-Questions et réponses frontales-php.cn

fenêtre de modification contextuelle jquery

王林

Libérer： 2023-05-25 09:27:07

original

637 Les gens l'ont consulté

Dans le développement Web, les fenêtres de modification contextuelles sont une exigence fonctionnelle courante. Cette fonctionnalité peut être facilement réalisée en utilisant jQuery. Cet article explique comment utiliser jQuery pour implémenter une fenêtre de modification contextuelle.

1. Structure HTML

Tout d'abord, nous devons créer une structure HTML pour décrire l'apparence et les éléments de la fenêtre pop-up. De manière générale, une fenêtre contextuelle doit contenir un titre, un formulaire, un bouton de soumission et un bouton de fermeture. Ce qui suit est un exemple simple de structure HTML :

<div id="modify-popup">
    <div class="popup-content">
        <h2>修改信息</h2>
        <form>
            <label>名称：</label>
            <input type="text" name="name" />
            <br/><br/>
            <label>年龄：</label>
            <input type="text" name="age" />
            <br/><br/>
            <input type="submit" value="提交" />
        </form>
        <a class="close" href="#">关闭</a>
    </div>
</div>

Copier après la connexion

2. Style CSS

Ensuite, nous devons définir le style CSS pour que la fenêtre contextuelle soit belle. Voici un exemple CSS de base :

#modify-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.popup-content {
    background-color: #fff;
    width: 600px;
    height: 350px;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: auto;
}

.popup-content h2 {
    font-size: 32px;
}

.popup-content form label {
    font-size: 22px;
}

.popup-content form input[type="text"] {
    width: 90%;
    height: 30px;
    font-size: 20px;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.popup-content form input[type="submit"] {
    width: 40%;
    height: 40px;
    font-size: 22px;
    background-color: #0066cc;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin-bottom: 20px;
}

.popup-content .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 22px;
}

Copier après la connexion

3. Code jQuery

Maintenant que nous avons préparé le code HTML et CSS, l'étape suivante est le code jQuery pour implémenter la fenêtre pop-up. Tout d'abord, nous devons lier un événement de clic au bouton d'ouverture de la fenêtre pop-up :

$('#open-popup').click(function() {
    $('#modify-popup').fadeIn();
});

Copier après la connexion

Ensuite, nous devons lier un événement de clic au bouton de fermeture :

$('#modify-popup .close').click(function() {
    $('#modify-popup').fadeOut();
});

Copier après la connexion

Enfin, nous devons lier un événement de clic au bouton de fermeture. Bouton d'envoi pour gérer l'opération d'envoi du formulaire :

$('#modify-popup form').submit(function(event) {
    event.preventDefault(); // 禁止表单提交
    // 处理表单提交逻辑
    $('#modify-popup').fadeOut();
});

Copier après la connexion

IV. Exemple de code complet

Voici l'exemple de code complet :

Code HTML :


<div id="modify-popup">
    <div class="popup-content">
        <h2>修改信息</h2>
        <form>
            <label>名称：</label>
            <input type="text" name="name" />
            <br/><br/>
            <label>年龄：</label>
            <input type="text" name="age" />
            <br/><br/>
            <input type="submit" value="提交" />
        </form>
        <a class="close" href="#">关闭</a>
    </div>
</div>

Copier après la connexion

Code CSS :

#modify-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.popup-content {
    background-color: #fff;
    width: 600px;
    height: 350px;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: auto;
}

.popup-content h2 {
    font-size: 32px;
}

.popup-content form label {
    font-size: 22px;
}

.popup-content form input[type="text"] {
    width: 90%;
    height: 30px;
    font-size: 20px;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.popup-content form input[type="submit"] {
    width: 40%;
    height: 40px;
    font-size: 22px;
    background-color: #0066cc;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin-bottom: 20px;
}

.popup-content .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 22px;
}

Copier après la connexion

jCode de requête :

$('#open-popup').click(function() {
    $('#modify-popup').fadeIn();
});

$('#modify-popup .close').click(function() {
    $('#modify-popup').fadeOut();
});

$('#modify-popup form').submit(function(event) {
    event.preventDefault(); // 禁止表单提交
    // 处理表单提交逻辑
    $('#modify-popup').fadeOut();
});

Copier après la connexion

Avec ce qui précède code, nous pouvons facilement l'implémenter. La fonction d'afficher la fenêtre de modification. Dans le développement réel, nous pouvons modifier et optimiser la disposition, le style et la logique de la fenêtre contextuelle selon les besoins.

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!