Hộp thoại Alert, Confirm, Prompt trong Javascript

Javascript Dialog Box
Alert Dialog Box
Confirmation Dialog Box
Prompt Dialog Box

1. Javascript Dialog Box

Javascript cung cấp 3 loại hộp thoại (Dialog Box) quan trọng, chúng bao gồm, hộp thoại để hiển thị một cảnh báo (alert) cho người dùng, hộp thoại yêu cầu người dùng xác nhận một vấn đề gì đó, và hộp thoại yêu cầu người dùng nhập vào một thông tin.

Chú ý các hộp thoại được cung cấp bởi Javascript có giao diện rất đơn giản và không thể tùy biến, trong ứng dụng thực tế có thể bạn sẽ sử dụng một thư viên được cung cấp bởi bên thứ ba để có được các hộp thoại đẹp hơn và nhiều tùy chọn hơn. Tuy nhiên các hộp thoại mặc định của Javascript vẫn có ích trong rất nhiều trường hợp.

Trong bài học này chúng ta sẽ thảo luận lần lượt từng hộp thoại.

2. Alert Dialog Box

Alert Dialog Box chủ yếu được sử dụng để hiển thị một thông báo, cảnh báo, hoặc lỗi cho người dùng. Về cơ bản bạn không thể tùy biến biểu tượng (icon) hoặc tiêu đề của hộp thoại,... bạn chỉ có thể cung cấp thông điệp mà hộp thoại sẽ hiển thị. Ngoài ra Alert Dialog Box cũng chỉ có duy nhất một nút OK để đóng hộp thoại.

Để hiển thị Alert Dialog Box bạn gọi hàm alert(message), trong đó message là nội dung mà hộp thoại sẽ hiển thị.

alert-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Alert Dialog Box</title>

      <script type="text/javascript">

         function testAlertDialog()  {

              alert("Something Error!");
         }

      </script>

   </head>
   <body>
      <h2>Alert Dialog Box</h2>


      <button onclick="testAlertDialog()">Click me!</button>

   </body>
</html>

3. Confirmation Dialog Box

Confirmation Dialog Box (Hộp thoại xác nhận) được sử dụng để yêu cầu người dùng xác nhận một vấn đề gì đó. Hộp thoại này rất đơn giản, bạn không thể tùy biến các biểu tượng hoặc tiêu đề của hộp thoại, bạn chỉ có thể cung cấp một thông điệp yêu cầu người dùng xác nhận. Hộp thoại này có 2 nút OK và Cancel.

Để hiển thị Confirmation Dialog Box bạn gọi hàm confirm(message), trong đó message là thông điệp yêu cầu người dùng xác nhận. Nếu người dùng nhấn vào nút OK hàm này sẽ trả về true, ngược lại nếu người dùng nhấn vào nút No hàm này sẽ trả về false.

confirm-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Confirmation Dialog Box</title>

      <script type="text/javascript">

         function testConfirmDialog()  {

              var result = confirm("Do you want to continue?");

              if(result)  {
                  alert("OK Next lesson!");
              } else {
                  alert("Bye!");
              }
         }

      </script>

   </head>
   <body>
      <h2>Confirmation Dialog Box</h2>


      <button onclick="testConfirmDialog()">Click me!</button>

   </body>
</html>

4. Prompt Dialog Box

Prompt Dialog Box được sử dụng để người dùng nhập vào một thông tin. Hộp thoại này rất đơn giản, nó bao gồm một Text Field (Trường văn bản) để người dùng nhập vào thông tin. Hộp thoại có 2 nút OK và Cancel.

Để hiển thị Prompt Dialog Box bạn gọi hàm prompt(message, defaultValue). Trong đó message là thông điệp cho người dùng, defaultValue là giá trị mặc định được điền sẵn vào Text Field.

Nếu người dùng nhấn vào nút OK, hàm sẽ trả về nội dung trên Text Field, ngược lại nếu người dùng nhấn vào nút Cancel hàm sẽ trả về null.

prompt-example.js

<!DOCTYPE html>
<html>
   <head>
      <title>Prompt Dialog Box</title>

      <script type="text/javascript">

         function testPromptDialog()  {

              var result = prompt("Enter you age:", "20");

              if(result != null)  {
                  alert("Your age is " + result);
              }
         }

      </script>

   </head>
   <body>
      <h2>Prompt Dialog Box</h2>


      <button onclick="testPromptDialog()">Click me!</button>

   </body>
</html>