JavaScript hỗ trợ ba loại hộp thoại quan trọng. Các hộp thoại này có thể được sử dụng để nâng cao và cảnh báo hoặc để nhận xác nhận về bất kỳ đầu vào nào hoặc để có một loại đầu vào từ người dùng. Ở đây chúng ta sẽ thảo luận từng hộp thoại một.
Alert Dialog Box
Hộp thoại cảnh báo chủ yếu được sử dụng để đưa ra thông báo cảnh báo cho người dùng. Ví dụ: nếu một trường đầu vào yêu cầu nhập một số văn bản nhưng người dùng không cung cấp bất kỳ thông tin đầu vào nào, thì như một phần xác thực, bạn có thể sử dụng hộp cảnh báo để đưa ra thông báo cảnh báo.
Tuy nhiên, hộp cảnh báo vẫn có thể được sử dụng cho các thông điệp thân thiện hơn. Hộp cảnh báo chỉ cung cấp một nút “OK” để chọn và tiếp tục.
Ví dụ
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>
Confirmation Dialog Box
Hộp thoại xác nhận chủ yếu được sử dụng để lấy sự đồng ý của người dùng đối với bất kỳ tùy chọn nào. Nó hiển thị một hộp thoại với hai nút: OK và Cancel.
Nếu người dùng nhấp vào nút OK, phương thức cửa sổ xác nhận () sẽ trả về true. Nếu người dùng nhấp vào nút Hủy, thì xác nhận () trả về sai. Bạn có thể sử dụng hộp thoại xác nhận như sau.
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
Hộp thoại lời nhắc rất hữu ích khi bạn muốn bật lên một hộp văn bản để nhận thông tin nhập của người dùng. Do đó, nó cho phép bạn tương tác với người dùng. Người dùng cần điền vào trường này và sau đó nhấp vào OK.
Hộp thoại này được hiển thị bằng một phương thức có tên là prompt() nhận hai tham số: (i) nhãn mà bạn muốn hiển thị trong hộp văn bản và (ii) một chuỗi mặc định để hiển thị trong hộp văn bản.
Hộp thoại này có hai nút: OK và Cancel. Nếu người dùng nhấp vào nút OK, phương thức cửa sổ prompt() sẽ trả về giá trị đã nhập từ hộp văn bản. Nếu người dùng nhấp vào nút Hủy, phương thức cửa sổ prompt() trả về giá trị rỗng.
Ví dụ
Ví dụ sau đây cho thấy cách sử dụng hộp thoại nhắc nhở –
