HomeLập trìnhJavaScriptCách xây dựng...

Cách xây dựng Hộp cảnh báo JavaScript hoặc Cửa sổ bật lên


Hộp bật lên (hoặc hộp thoại) là các cửa sổ phương thức được sử dụng để thông báo hoặc cảnh báo người dùng hoặc để nhận đầu vào từ người dùng.

Hộp bật lên ngăn người dùng truy cập vào các khía cạnh khác của chương trình cho đến khi cửa sổ bật lên được đóng lại, vì vậy không nên lạm dụng chúng.

Có ba loại phương thức bật lên khác nhau được sử dụng trong JavaScript: window.alert(), window.confirm() và window.prompt().

Báo động

Phương thức cảnh báo hiển thị các thông báo không yêu cầu người dùng nhập phản hồi. Khi chức năng này được gọi, một hộp thoại cảnh báo sẽ xuất hiện với thông báo (tùy chọn) đã chỉ định. Người dùng sẽ được yêu cầu xác nhận tin nhắn trước khi cảnh báo biến mất.

Ví dụ:

window.alert("Welcome to our website");

Ví dụ cảnh báo MDN

Xác nhận

Phương pháp xác nhận tương tự như window.alert(), mà còn hiển thị nút hủy trong cửa sổ bật lên. Các nút trả về giá trị boolean: đúng cho OK và sai cho Hủy.

Ví dụ:

var result = window.confirm('Are you sure?');
if (result === true) {
    window.alert('Okay, if you're sure.');
} else { 
    window.alert('You seem uncertain.');
}
Ví dụ xác nhận MDN

Lời nhắc

Phương thức nhắc thường được sử dụng để nhận văn bản đầu vào từ người dùng. Hàm này có thể nhận hai đối số, cả hai đều là tùy chọn: một thông báo để hiển thị cho người dùng và một giá trị mặc định để hiển thị trong trường văn bản.

Đọc thêm  Cách định dạng số dưới dạng tiền tệ trong JavaScript

Ví dụ:

var age = prompt('How old are you?', '100');

Ví dụ nhắc MDN

Tùy chọn thiết kế khác:

Nếu bạn không hài lòng với cửa sổ bật lên JavaScript mặc định, bạn có thể thay thế bằng các thư viện giao diện người dùng khác nhau. Ví dụ: SweetAlert cung cấp một sự thay thế tuyệt vời cho các phương thức JavaScript tiêu chuẩn. Bạn có thể đưa nó vào HTML của mình thông qua CDN (mạng phân phối nội dung) và bắt đầu sử dụng.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Cú pháp là như vậy: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Đoạn mã trên sẽ tạo ra cửa sổ bật lên sau:

Ví dụ SweetAlert

SweetAlert không phải là sự thay thế duy nhất cho các phương thức tiêu chuẩn, nhưng nó rõ ràng và dễ thực hiện.

Thêm thông tin:



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status