Đổi giao diện Alert – Confirm – Prompt của Javascript

Có bao giờ bạn muốn thay đổi giao diện Alert – Confirm – Prompt…của Javascript chưa? Nếu cảm thấy thích thú và muốn tùy chỉnh lại cho đẹp với giao diện website của bạn, hãy đọc bài này để tìm hiểu thêm. Chúng ta sẽ sử dụng plugin tên smoke.js để thực hiện tùy chỉnh theo ý thích

giao dien alert javascript

Giới thiệu

Nhu cầu thiết kế web và tùy chỉnh giao diện của các webmaster rất đa dạng, trong đó các thành phần mặc định của Javascript như: Alert – Confirm – Prompt… mang giao diện mặc định theo trình duyệt. Có 1 cách để thay đổi và tùy chỉnh các giao diện mặc định đó là sử dụng một plugin tên là smoke.js

Hướng dẫn – Thay đổi giao diện Alert Javascript

Các bạn truy cập vào smoke.js và click vào mục “Download Zip”  để tải về. Sau khi tải về, các bạn giải nén ra, sẽ thấy các tập tin cần thiết:

danh-sach-file-smoke-js

Các bạn chèn các file: smoke.css, smoke.js, smoke.min.js vào trong trang web của các bạn bằng các thẻ <link> cho CSS và Script cho JS

Ở đây file smoke.css là để chỉnh style cho các hàm Alert, Confirm, Prompt. Các bạn có thể mở file đó lên và chỉnh màu sắc,bố cục theo ý muốn

Về cách sử dụng, các bạn tham khảo trước ở đường dẫn này từ website của smoke.js

Trang tài liệu hướng dẫn này rất đơn giản và ngắn gọn, chỉ cần copy các dòng code có sẵn và chèn vào trong site của bạn. Ví dụ để tùy biến cho Alert, các bạn chèn vào website như sau:

<script>// <![CDATA[
smoke.alert("Can I ask you a question?", function(e){
	
}, {
	ok: "Yep",
	cancel: "Nope",
	classname: "custom-class"
});
// ]]></script>

Các thành phần khác cũng tương tự như vậy.
Chúc các bạn thành công