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

Share:
Bootstrap Modal Plugin 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 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>

<!-- Button dùng để gọi popup -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click để mở popup</button>

<!-- popup -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Nội dung popup.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
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ả.


Không có nhận xét nào