Rumah > Artikel > hujung hadapan web > Apakah kegunaan pop timbul dalam javascript
Apakah kegunaan pop timbul dalam javascript
- PHPzasal
- 2023-04-21 14:15:20924semak imbas
JavaScript ialah teknologi penting dalam pembangunan bahagian hadapan, dan tetingkap pop timbul juga merupakan fungsi yang sangat praktikal dalam pembangunan bahagian hadapan. Artikel ini akan memperkenalkan secara terperinci penggunaan pop timbul dalam JavaScript.
Apakah itu tetingkap timbul?
Tetingkap timbul merujuk kepada tetingkap kecil yang muncul pada halaman web. Ia biasanya beberapa fungsi kecil, seperti log masuk pengguna, kata laluan terlupa, dll. Fungsi ini memerlukan pengguna memasukkan maklumat pada masa tertentu, dan tetingkap pop timbul hanya memenuhi keperluan ini.
Bagaimana untuk melaksanakan tetingkap timbul?
Sebelum melaksanakan tetingkap timbul, kita perlu memahami konsep dahulu: DOM. Nama penuh DOM ialah "Model Objek Dokumen". Ia adalah satu set piawaian yang dibangunkan oleh organisasi W3C untuk menerangkan struktur hierarki dokumen. Ia menghuraikan dokumen ke dalam satu set struktur yang terdiri daripada nod dan objek API DOM dan objek.
Dalam JavaScript, kami melaksanakan tetingkap timbul melalui operasi DOM. Secara khusus, kita perlu menggunakan tiga langkah penting berikut:
- Buat tetingkap timbul
Pertama, kita perlu mencipta tetingkap timbul. Ini boleh dicapai dengan menyediakan halaman HTML kosong, atau menggunakan JavaScript untuk mencipta objek tetingkap baharu secara dinamik. Seperti yang ditunjukkan di bawah:
var newWindow = window.open("", "newWindow", "width=200,height=100");
Antaranya, parameter pertama ialah URL yang dibuka Memandangkan kita tidak perlu membuka mana-mana halaman, ia ditetapkan kepada rentetan kosong "". Parameter kedua ialah nama tetingkap baharu Jika tetingkap bernama newWindow telah wujud, maka tetingkap itu akan dibuka jika ia tidak wujud, tetingkap baharu bernama newWindow akan dibuat. Parameter ketiga ialah saiz tetingkap baharu.
- Tambah kandungan pada tetingkap timbul
Seterusnya, kita perlu menambah kandungan pada tetingkap timbul. Terdapat dua cara utama untuk menambah: satu ialah dengan mengubah suai kod HTML tetingkap pop timbul, dan satu lagi adalah dengan menambahkan elemen baharu secara dinamik melalui JavaScript.
Dengan mengubah suai kod HTML, kami boleh menggunakan fungsi document.write() untuk menambah kod HTML pada pop timbul. Contohnya:
newWindow.document.write("<h1>Welcome to my popup window!</h1>");
Untuk menambah elemen baharu secara dinamik melalui JavaScript, anda boleh menggunakan fungsi manipulasi DOM seperti createElement() dan appendChild(). Contohnya:
var popupDiv = newWindow.document.createElement("div");
popupDiv.appendChild(newWindow.document.createTextNode("This is a popup message!"));
newWindow.document.body.appendChild(popupDiv);
Kod di atas mencipta elemen div secara dinamik, menambah nod dengan teks "Ini ialah mesej pop timbul pada div dan akhirnya menambah div pada tetingkap timbul.
- Kawal paparan dan penutupan tetingkap timbul
Akhir sekali, kita perlu mengawal paparan dan penutupan tetingkap timbul. Paparan dan penutupan tetingkap pop timbul juga boleh direalisasikan melalui JavaScript, seperti yang ditunjukkan di bawah:
// 显示popup窗口 newWindow.focus(); // 关闭popup窗口 newWindow.close();
Antaranya, fungsi fokus() digunakan untuk memindahkan fokus ke tetingkap pop timbul yang dibuka dalam JavaScript kod; fungsi tutup () digunakan untuk menutup tetingkap pop timbul.
Contoh komprehensif
Berikut ialah contoh pelaksanaan pop timbul yang lebih lengkap untuk rujukan pembaca:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Popup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #3f51b5;
margin-bottom: 20px;
}
button {
background-color: #4caf50;
border: none;
color: #fff;
padding: 10px 20px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
</style>
<script>
function openPopup() {
var newWindow = window.open("", "newWindow", "width=300,height=180");
var popupDiv = newWindow.document.createElement("div");
popupDiv.style.textAlign = "center";
popupDiv.style.marginTop = "30px";
var popupTitle = newWindow.document.createElement("h1");
popupTitle.innerText = "This is a popup window!";
popupDiv.appendChild(popupTitle);
var popupMessage = newWindow.document.createElement("p");
popupMessage.innerText = "Please enter your name:";
popupDiv.appendChild(popupMessage);
var popupInput = newWindow.document.createElement("input");
popupInput.setAttribute("type", "text");
popupInput.style.padding = "5px";
popupInput.style.marginTop = "10px";
popupInput.style.borderRadius = "3px";
popupDiv.appendChild(popupInput);
var popupButton = newWindow.document.createElement("button");
popupButton.innerText = "Submit";
popupButton.style.marginTop = "20px";
popupButton.onclick = function() {
alert("Hello, " + popupInput.value + "!");
newWindow.close();
};
popupDiv.appendChild(popupButton);
newWindow.document.body.appendChild(popupDiv);
newWindow.focus();
}
</script>
</head>
<body>
<button onclick="openPopup()">Open Popup</button>
</body>
</html>
Kod di atas melaksanakan tetingkap timbul yang sangat mudah Apabila butang dihidupkan, tetingkap pop timbul muncul, meminta pengguna memasukkan nama, dan kemudian mengklik butang serah, kotak dialog muncul untuk memaparkan nama yang dimasukkan, dan menutup tetingkap pop timbul.
Ringkasan
Dalam pembangunan bahagian hadapan, tetingkap timbul ialah fungsi yang sangat praktikal. Melalui pengenalan artikel ini, pembaca telah pun memahami penggunaan asas pop timbul dalam JavaScript, termasuk operasi seperti mencipta, menambah kandungan, memaparkan dan menutup. Saya harap artikel ini dapat membantu pembaca lebih memahami tetingkap pop timbul dalam pembangunan bahagian hadapan.
Atas ialah kandungan terperinci Apakah kegunaan pop timbul dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!