Share Tạo popup modal chuyên nghiệp với thư viện iziModal

filiallion

Administrator
Staff member
Administrator
Messages
341
Points
10
Language
Tiếng Việt
Khi các bạn truy cập các website có các hộp thông báo hiện lên hay các cửa sổ nhỏ nằm trong website trình bày nội dung đáng chú ý thì đó được gọi là popup hay modal. Để trình bày các popup modal này thì các bạn có nhiều thư viện JavaScript để thực hiện và một trong số đó là iziModal. Hôm trước tôi cũng đã giới thiệu với các bạn một thư viện khác là iziToast dùng để tạo thông báo, các bạn có thể xem thêm bài viết "Tạo thông báo toast với thư viện iziToast".

Thư viện iziModal khác với iziToast ở chỗ là thư viện iziModal cần phải tích hợp thư viện jQuery trước khi tích hợp thư viện iziModal.

Các bạn tải thư viện iziModal tại địa chỉ https://github.com/dolce/iziModal và tích hợp vào website với nội dung mã lệnh HTML như sau:
HTML:
<link href="path/to/iziModal.min.css" rel="stylesheet">
<script src="path/to/iziModal.min.js"></script>
Sau đó các bạn cài đặt thư viện iziModal với nội dung mã lệnh JavaScript như sau:
JavaScript:
$(function() {
    $('#izi-modal').iziModal();
});
Và các bạn trình bày nội dung modal như ví dụ sau:
HTML:
<div id="izi-modal">Modal content</div>
Các bạn có thể tìm hiểu thêm về thư viện iziModal tại địa chỉ http://izimodal.marcelodolce.com.
 
Top