Tạo cửa sổ popup đơn giản chuyên nghiệp với bootstrap

Code cơ bản

Bootstrap Modal Plugin là một hộp thoại / cửa sổ bật lên được hiển thị nổi trên đầu trang. Là thành phần sẵn có trong Bootstrap, ta chỉ cần gọi nó ra và sử dụng.

Tạo cửa sổ popup đơn giản chuyên nghiệp với bootstrap.
Tạo cửa sổ popup đơn giản chuyên nghiệp với bootstrap.

Tạo popup dễ dàng trong bootstrap với bootstrap modal plugin.

Cách gọi như sau: Đặt đoạn code sau vào trong thẻ <body>

Giải thích:

Nút gọi popup:
data-target=”#myModal” là dùng để xác định popup nào được gọi (nếu có nhiều popup trên cùng trang), trong ví dụ trên là popup có id là #myModal
data-toggle=”modal” là lệnh mở một Modal Popup trong Bootstrap
– Bạn có thể sử dụng button hoặc thẻ <a> để gọi popup nhưng phải luôn có 2 thuộc tính ở trên.

Popup:
– Thẻ <div> cha chứa id=”myModal” dùng để xác định popup nào được gọi khi click button, class .modal xác định nội dung nào là của popup
– Class fade là hiệu ứng transition với fade in và fade out.
– Thuộc tính role=”dialog” hiển thị popup dạng dialog
– Class modal-dialog dùng để set width và margin cho popup, bạn có thể thêm class modal-sm hoặc modal-lg để set độ lớn nhỏ của pupup

Phần Modal content:
Nơi chứa nội dung chính mà bạn muốn hiển thị trong popup. Ở phần này có thể tùy chỉnh hoặc giữ nguyên mặc định nếu muốn.Lưu lại và chạy thử trên trình duyệt, click button “Click để mở popup” để xem kết quả.