Bagaimana untuk mereka bentuk tetingkap pop timbul dengan JavaScript

Tetingkap timbul ialah salah satu elemen interaktif biasa dalam reka bentuk web moden Ia boleh digunakan untuk menggesa pengguna, memaparkan kandungan atau membimbing pengguna untuk melakukan operasi. Javascript ialah bahasa yang sangat diperlukan dalam reka bentuk web moden boleh direka bentuk melalui Javascript. Di bawah ini kami akan memperkenalkan cara menggunakan Javascript untuk mereka bentuk tetingkap pop timbul.

1. Struktur HTML

Tetingkap pop timbul perlu mempunyai struktur HTML terlebih dahulu, yang boleh dilaksanakan dengan memilih teg seperti div dan bahagian. Di dalam teg ini, anda boleh menambah kandungan yang perlu dipaparkan.

Struktur HTML adalah seperti berikut:

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

2. Gaya CSS

Gaya CSS digunakan untuk menentukan penampilan tetingkap timbul perlu ditetapkan, seperti tetingkap timbul Lebar, ketinggian, kedudukan, dsb. Di samping itu, anda juga perlu menetapkan keadaan awal tetingkap pop timbul kepada keadaan tersembunyi.

Gaya CSS adalah seperti berikut:

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

Selepas struktur HTML dan gaya CSS tetingkap pop timbul telah ditetapkan, anda boleh menggunakan Javascript Untuk memaparkan dan menyembunyikan tetingkap pop timbul.

Pertama sekali, anda perlu mendapatkan elemen tetingkap pop timbul dan menetapkan gaya paparan dan sembunyikan.

Kod Javascript adalah seperti berikut:

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

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

Seterusnya, anda perlu menambah acara klik pada butang buka dan tutup tetingkap timbul Apabila pengguna mengklik butang ini, tetingkap pop timbul akan dibuka atau ditutup dengan sewajarnya.

Kod Javascript adalah seperti berikut:

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

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

Di atas adalah proses asas menggunakan Javascript untuk mereka bentuk tetingkap timbul. Dalam penggunaan sebenar, kami boleh menambah dan mengubah suai kod mengikut keperluan khusus untuk mencapai kesan pop timbul yang lebih kompleks dan kaya.

Atas ialah kandungan terperinci Bagaimana untuk mereka bentuk tetingkap pop timbul dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!