Skip to main content
Home HTML JAVASCRIPT [JAVASCRIPT] Tạo Hộp Thoại Thông Báo

[JAVASCRIPT] Tạo Hộp Thoại Thông Báo

Chào mọi người, bài viết này mình sẽ hướng dẫn mọi người làm tạo thông báo kiểu Popup khi các bạn nhấn vào một Button trên giao diện và nó sẽ hiện ra thông báo cho người dùng được biết.

JavaScript Popup Boxes

Hộp bật lên đóng vai trò là phương tiện hữu ích để truyền tải cảnh báo hoặc thông tin cần thiết đến khách truy cập trang web. JavaScript cung cấp ba loại hộp bật lên riêng biệt có thể được sử dụng cho nhiều mục đích khác nhau. Và có 3 dạng cho mọi người lựa chọn.
  1. alert()
  2. confirm()
  3. prompt()

Chúng ta bắt đầu với từng mẫu nhé.

1. alert() - Hộp tin nhắn JavaScript

Hộp thoại cảnh báo chủ yếu dùng để truyền đạt các thông điệp quan trọng đến người dùng bằng cách trình bày chúng trong một hộp thoại nhỏ gọn. Đáng chú ý là phương thức alert() không yêu cầu tham chiếu đối tượng trước nó, vì nó là một thành phần của đối tượng cửa sổ. Khi xuất hiện, người dùng được nhắc nhấp vào nút "OK" để xác nhận và tiếp tục.
Cú pháp.
alert('Tin nhắn của bạn ...');

run this source code alert()

Full Code.

  <html>
  <body>
    <input type="button" value="Demo Here..." onclick="alert('Đây Là Hộp Thoải Cảnh Báo');" />
  </body>
</html>

2. JavaScript Confirm() Box.

Hộp xác nhận giúp người dùng dễ dàng ra quyết định bằng cách đưa ra lựa chọn. Khi kích hoạt hộp xác nhận do JavaScript điều khiển, người dùng sẽ được nhắc chọn tùy chọn "OK" hoặc "Cancel" để tiếp tục hành động tiếp theo. Kết quả thay đổi tùy theo nút đã chọn và bạn có thể xác định hướng hành động tiếp theo thông qua logic có điều kiện.
Cú pháp.
result = window.confirm(message);

run this source code Confirm() Box



Full Code.

  <html>
  <head>
    <script type="text/javascript">
      function hungprovn() {
        var conVal = confirm("Bạn Đã Sẳn Sàng Để Xác Nhận Chưa?");
        if (conVal == true) {
          val = "Đã Xác Nhận !!";
        } else {
          val = "Bạn Đã Hủy !!";
        }
        alert(val);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" onclick="hungprovn()" value="Demo Confirm() Box ?" />
    </form>
  </body>
</html>

3. JavaScript prompt Box

Phương thức alert() thiếu tính tương tác, trong khi JavaScript Prompt Box phục vụ mục đích thu thập dữ liệu đầu vào của người dùng trước khi tiến tới giai đoạn tiếp theo. Sử dụng hộp nhắc JavaScript sẽ nhắc người dùng cung cấp giá trị đầu vào, với yêu cầu nhấp vào "OK" hoặc "Hủy" sau khi nhập. Giá trị trả về từ lời nhắc phụ thuộc vào tương tác của người dùng với hộp thoại: nếu họ nhập và xác nhận, phương thức sẽ đưa ra dữ liệu đầu vào của người dùng; nếu họ xác nhận mà không nhập, phương thức sẽ trả về dữ liệu đầu vào được xác định trước từ đối số được cung cấp. Trong trường hợp hủy bỏ, thường là bằng cách nhấp vào "Hủy" hoặc nhấn "Esc", phương thức sẽ trả về giá trị null trên hầu hết các trình duyệt.
run this source code Prompt Box



Full Code.

  <html>
  <head>
    <script type="text/javascript">
      function hungprovn() {
        var iDay = prompt("Nhập bất kỳ nội dung nào...", "");
        if (iDay != null) {
          alert("TBạn đã nhập nội dung: " + iDay);
        } else {
          alert("Thật Đáng Tiếc Bạn Chưa Nhập nội dung gì!");
        }
      }
    </script>
  </head>
  <body>
    <form>
      <input type="button" onclick="hungprovn()" value="Demo Prompt box.." />
    </form>
  </body>
</html>

Kết luận.

Hộp bật lên JavaScript bao gồm các hộp thoại cảnh báo, xác nhận và nhắc nhở cho phép tương tác với khách truy cập trang web. Cảnh báo hiển thị tin nhắn, hộp thoại xác nhận nhắc nhở lựa chọn của người dùng và hộp nhắc nhở thu thập thông tin đầu vào trước khi tiếp tục, tăng cường sự tham gia và tương tác của người dùng.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar