tetingkap pengubahsuaian pop timbul jquery

Dalam pembangunan web, tetingkap pengubahsuaian pop timbul ialah keperluan fungsian biasa. Fungsi ini boleh dicapai dengan mudah menggunakan jQuery. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan tetingkap pengubahsuaian pop timbul.

1. Struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk menerangkan rupa dan elemen tetingkap timbul. Secara umumnya, tetingkap pop timbul harus mengandungi tajuk, borang, butang hantar dan butang tutup. Berikut ialah contoh struktur HTML yang mudah:

<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>

2. Gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS untuk menjadikan tetingkap timbul kelihatan cantik. Berikut ialah contoh asas 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;
}

3. Kod jQuery

Kini setelah kami menyediakan kod HTML dan CSS, langkah seterusnya ialah melaksanakan kod jQuery untuk pop timbul tingkap. Mula-mula, kita perlu mengikat acara klik pada butang buka tetingkap timbul:

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

Kemudian kita perlu mengikat acara klik pada butang tutup:

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

Akhir sekali, kami perlu mengikat acara klik pada butang hantar Tentukan acara klik untuk mengendalikan operasi penyerahan borang:

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

4. Lengkapkan kod contoh

Berikut ialah contoh kod lengkap:

Kod 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>

Kod 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;
}

Kod jQuery:

$('#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();
});

Dengan kod di atas, kita boleh dengan mudah merealisasikan fungsi muncul tetingkap pengubahsuaian . Dalam pembangunan sebenar, kami boleh mengubah suai dan mengoptimumkan susun atur, gaya dan logik tetingkap pop timbul mengikut keperluan.

Atas ialah kandungan terperinci tetingkap pengubahsuaian pop timbul jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!