Kami boleh menggunakan kotak pop timbul untuk menunjukkan mesej pop timbul kepada pengguna apl. Kami akan mempelajari tentang pelbagai jenis pop timbul JavaScript dalam tutorial ini.
Tiga jenis kotak pop timbul yang berbeza disediakan dalam JavaScript di bawah.
Kotak Amaran
Kotak pengesahan
Kotak segera
Di bawah ini kita akan belajar tentang semua kotak pop timbul satu demi satu.
Kita boleh menggunakan kaedah window.alert() untuk memaparkan kotak amaran. Ia hanya memaparkan mesej dalam kotak pop timbul.
Apabila kami perlu memberikan beberapa mesej kepada pengguna, kami boleh menggunakan kotak amaran. Sebagai contoh, apabila pengguna log masuk ke aplikasi, ia memaparkan mesej seperti "Anda berjaya log masuk."
Pengguna boleh memaparkan kotak amaran dalam JavaScript dengan mengikut sintaks berikut.
alert(message)
Mesej- Ini ialah mesej yang dipaparkan dalam kotak amaran.
Dalam contoh ini, apabila pengguna mengklik butang, kami akan memanggil fungsi showAlert(). Fungsi showAlert() menggunakan kaedah alert() untuk memaparkan kotak amaran.
Dalam output, pengguna dapat melihat bahawa apabila kita menekan butang, ia memaparkan kotak amaran dengan mesej yang diluluskan sebagai parameter. Apabila kami menekan butang "OK" dalam kotak amaran, ia hilang.
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
Apabila kami memerlukan pengesahan pengguna, kami boleh menggunakan kotak pengesahan. Sebagai contoh, kami perlu mendapatkan pengesahan pengguna sebelum memadamkan beberapa data penting.
Kita boleh menggunakan kaedah window.confirm() untuk memaparkan kotak pengesahan. Kotak pengesahan mengandungi dua butang dengan teks "OK" dan "Batal". Mengembalikan palsu jika pengguna menekan butang batal jika sebaliknya.
Pengguna boleh memaparkan kotak pengesahan dalam JavaScript dengan mengikuti sintaks berikut.
confirm(message);
Mesej- Ini ialah mesej pengesahan yang muncul dalam kotak pengesahan.
Ia mengembalikan nilai boolean benar dan palsu berdasarkan sama ada pengguna menekan butang "OK" atau "Batal".
Dalam contoh ini, kami menggunakan kaedah confirm() bagi objek tetingkap untuk memaparkan kotak pengesahan. Selain itu, kami memaparkan mesej yang berbeza kepada pengguna pada skrin bergantung pada sama ada mereka menekan butang OK atau Batal pada kotak pengesahan.
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
Kotak gesaan ialah cara ketiga untuk memaparkan mesej pop timbul dalam JavaScript. Kotak gesaan ialah versi lanjutan bagi kotak amaran() dan pengesahan. Ia memaparkan mesej dalam kotak dan menerima input daripada pengguna. Selain itu, ia mengandungi butang OK dan Batal untuk menyerahkan nilai input.
Pengguna boleh menggunakan kotak gesaan untuk mendapatkan input pengguna dalam JavaScript mengikut sintaks berikut.
prompt(message, placeholder);
Kami memanggil kaedah static prompt() dalam sintaks di atas.
mesej - Ini ialah mesej yang dipaparkan di atas kotak input.
Pemegang tempat- Ini ialah teks yang dipaparkan dalam kotak input.
Jika pengguna menekan butang OK, mengembalikan nilai input jika tidak ia kosong.
Dalam contoh ini, kami mencipta fungsi takeInput(), yang memaparkan petua alat kepada pengguna. Kami menggunakan kotak gesaan untuk mendapatkan nama yang dimasukkan oleh pengguna.
Apabila pengguna menekan butang OK selepas memasukkan nilai input, kami akan memaparkan input pengguna pada skrin.
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
Kami telah melihat ketiga-tiga pop timbul berbeza dengan contoh dalam tutorial ini. Jika kita hanya perlu memaparkan mesej, kita boleh menggunakan kotak amaran, jika kita hanya memerlukan pengesahan pengguna, kita harus menggunakan kotak pengesahan. Jika kita perlu memasukkan nilai atau mengesahkan nilai dalam kotak pop timbul, kita harus menggunakan kotak gesaan.
Atas ialah kandungan terperinci Menggunakan acara untuk mentafsir mesej pop timbul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
