JavaScript มีกล่องป๊อปอัปสามประเภท: กล่องแจ้งเตือน กล่องยืนยัน และกล่องพร้อมท์
กล่องแจ้งเตือนมักใช้หากคุณต้องการให้แน่ใจว่าข้อมูลถูกส่งถึงผู้ใช้
เมื่อกล่องแจ้งเตือนปรากฏขึ้น ผู้ใช้จะต้องคลิก "ตกลง" เพื่อดำเนินการต่อ
window.alert("sometext");วิธีการ window.alert() สามารถเขียนได้โดยไม่ต้องใช้หน้าต่าง คำนำหน้า
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
กล่องยืนยันมักใช้หากคุณต้องการให้ผู้ใช้ยืนยันหรือยอมรับบางสิ่ง
เมื่อกล่องยืนยันปรากฏขึ้น ผู้ใช้จะต้องคลิก "ตกลง" หรือ "ยกเลิก" เพื่อดำเนินการต่อ
หากผู้ใช้คลิก "ตกลง" กล่องจะส่งกลับ จริง หากผู้ใช้คลิก "ยกเลิก" กล่องจะกลับมา เท็จ
window.confirm("sometext");window.confirm() วิธีการสามารถเขียนได้โดยไม่ต้องมีคำนำหน้าหน้าต่าง
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
กล่องพร้อมท์มักใช้หากคุณต้องการให้ผู้ใช้ป้อนค่าก่อนเข้าสู่เพจ
เมื่อกล่องข้อความปรากฏขึ้น ผู้ใช้จะต้องคลิก "ตกลง" หรือ "ยกเลิก" เพื่อดำเนินการต่อหลังจากป้อนค่าอินพุตแล้ว
หากผู้ใช้คลิก "ตกลง" กล่องจะส่งกลับค่าอินพุต หากผู้ใช้คลิก "ยกเลิก" กล่องจะส่งคืนค่าว่าง
window.prompt("sometext","defaultText");window.prompt() วิธีการสามารถเขียนได้โดยไม่ต้องมีคำนำหน้าหน้าต่าง
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
หากต้องการแสดงตัวแบ่งบรรทัดภายในกล่องป๊อปอัป ให้ใช้แบ็กสแลชตามด้วยอักขระ n
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>
<button onclick="alert('Hello\nHow are you?')">Try it</button>
</body>
</html>