Resize Modal Bootstrap Đúng Cách

Sử dụng modal trong Twitter Bootstrap framework trong nhiều trường hợp chúng ta muốn chỉnh sửa kích cỡ (hay resize) cửa sổ modal hiện ra sao cho phù hợp với nội dung hiển thị. Nhiều bạn lập trình viên frontend khi đối mặt với yêu cầu trên đã lúng túng không biết xoay sở ra sao, còn một số thì nghĩ ra solution đó là thêm mã CSS để tuỳ chỉnh chiều rộng (awidth) và chiều cao (height) của modal.

Vấn đề gặp phải khi thêm CSS đó là bạn cần đảm bảo kích thước modal sau khi tuỳ chỉnh cần đáp ứng hiển thị responsive trên nhiều màn hình khác nhau. Hầu hết các bạn chỉ thêm CSS để modal hiển thị được trên một màn hình duy nhất là desktop mà "quên" các màn hình kích cỡ nhỏ hơn như mobile và tablet và điều này dẫn đến modal sau khi chỉnh sửa hiển thị không responsive.

Tuy nhiên thì cũng có một cách rất đơn giản để chỉnh sửa kích thước modal sử dụng các CSS class được hỗ trợ sẵn trong Twitter Bootstrap:

• Sử dụng CSS Class modal-dialog modal-sm để tạo modal có kích thước nhỏ.
• Sử dụng CSS Class modal-dialog modal-lg để tạo modal có kích thước lớn.

Ở các phần tiếp theo đây chúng ta sẽ tham khảo các đoạn code HTML đầy đủ minh hoạ cho từng trường hợp tạo modal với các kích thước khác nhau. Trong cả 3 trường hợp bạn sẽ thấy sự khác biệt tạo ra sự thay đổi trong hiển thị kích thước của modal được tạo ra từ sự khác biệt trong CSS Class của thẻ <div classs="modal-dialog ...">. Các sự thay đổi khác trong mã HTML với từng trường hợp chỉ dẫn tới sự thay đổi trong nội dung văn bản hiển thị mà không ảnh hưởng tới kích thước modal.

Modal Kích Thước Nhỏ

Code HTML:

  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Mở Modal Nhỏ</button>

  <div class="modal fade" id="myModal" role="dialog" >
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Tiêu Đề Modal</h4>
        </div>
        <div class="modal-body">
          <p>Modal có kích thước nhỏ.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
  </div>

Hiển Thị:

Modal Kích Thước Lớn

Code HTML:

  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Mở Modal Lớn</button>

  <div class="modal fade" id="myModal" role="dialog" >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Tiêu Đề Modal</h4>
        </div>
        <div class="modal-body">
          <p>Modal có kích thước lớn.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
  </div>

Hiển Thị:

Modal Kích Thước Trung Bình

Kích thước trung bình là hiển thị mặc định khi tạo modal, do đó bạn không cần thêm CSS class nếu muốn sử dụng kích thước này.

Code HTML:

  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Mở Modal Trung Bình</button>

  <div class="modal fade" id="myModal" role="dialog" >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Tiêu Đề Modal</h4>
        </div>
        <div class="modal-body">
          <p>Modal có kích thước trung bình.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
        </div>
      </div>
    </div>
  </div>

Hiển thị: Hiển thị mặc định của modal trong Twitter Bootstrap.