3 loại dialog box của Javascript

Trong Javascript, dialog box được sử dụng để thực hiện một số công việc như hiện cảnh báo, lấy xác nhận của người dùng hay lấy dữ liệu nhập của người dùng. Trong đó alert là loại được sử dụng nhiều nhất mà chủ yếu là debug :))

Alert Dialog Box

Alert dialog box thưởng được dùng để gửi thông báo đến người dùng. Ngoài ra lập trình viên cũng hay dùng để debug code.

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>
    <input type="button" value="Click Me" onclick="warn();" />
  </body>
</html>

Kết quả

dialog-box-anh1

Confirmation Dialog Box

Confirmation box được dùng để lấy xác nhận từ người dùng. Confirmation dialog box có 2 nút nhấn: OK và Cancel. Nếu người dùng nhấn OK, thì confirm() sẽ trả true. Nếu người dùng nhấn OK thì prompt() sẽ trả về false.

Ví dụ

<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>
    <input type="button" value="Click Me" onclick="getConfirmation();" />
  </body>
</html>

Kết quả

dialog-box-anh2

Prompt Dialog Box

Prompt dialog được dùng để lấy dữ liệu từ người dùng. Prompt dialog box có 2 nút nhấn: OK và Cancel. Nếu người dùng nhấn OK, thì prompt() sẽ trả về nội dung người dùng đã nhập. Nếu người dùng nhấn OK thì prompt() sẽ trả về null.

Ví dụ

<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>
    <input type="button" value="Click Me" onclick="getValue();" />
  </body>
</html>

Kết quả

dialog-box-anh3

Nếu các bạn thấy bài viết hữu ích thì ủng hộ website bằng một like bên tay trái nha. Cảm ơn các bạn.

>>Xem thêm: Toán tử luận lý và thao tác bit trong Javascript

>>Xem thêm: Làm quen với Javascript phần 1

Bình luận