Tạo popup dễ dàng trong Bootstrap với Bootstrap Modal Plugin

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.

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

Hoặc bạn có thể download file demo dưới đây:

http://www.mediafire.com/download/sab04xcm7skk837/Popup+Bootstrap+Example+-2.htm

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Tạo popup dễ dàng trong Bootstrap với Bootstrap Modal Plugin

0 nhận xét:

Post a Comment

Chủ đề mới nhất

Giải đáp