Hướng dẫn edit modal bootstrap - chỉnh sửa modal bootstrap

Hướng dẫn edit modal bootstrap - chỉnh sửa modal bootstrap

Đã đăng vào thg 2 22, 2018 7:10 SA 3 phút đọc 3 phút đọc

Giới thiệu

Bài viết sẽ giúp các bạn tạo 1 modal (hộp thoại) trong Bootstrap. Modal là 1 thành phần cần thiết trong thiết kế Web dùng để hiển thị popup, video và hình ảnh...

Bootstrap cho phép bạn thêm một modal dialog vào trang web của bạn. Một modal là một dialog box lấy nét trong khi phần còn lại của màn hình bị mờ hoặc xám. Điều này buộc người dùng thực hiện hành động trên dialog box trước khi tiếp tục.

Để tạo ra một modal, sử dụng class .modal cùng với các class khác .modal-* để xác định từng phần của phương thức này..modal cùng với các class khác .modal-* để xác định từng phần của phương thức này.

Giải thích ví dụ:

Phần “Trigger”:

  • Để hiển thị modal, bạn tạo 1 link hoặc button.

  • Sau đó, thêm 2 thuộc tính sau cho link hoặc button vừa tạo:

    data-toggle=”modal”: dùng để mở modal window. dùng để mở modal window.

    data-target=”#myModal”: dùng để nhận biết modal nào thông qua id. dùng để nhận biết modal nào thông qua id.

Phần “Modal”:

  • Tạo 1 div container có id là #myModal (chính là id mà data-target trong phần Trigger sử dụng).#myModal (chính là id mà data-target trong phần Trigger sử dụng).
  • Class .modal mô tả 1 modal và nội dung của nó..modal mô tả 1 modal và nội dung của nó.
  • Class .fade dùng để thêm hiệu ứng fade (mờ dần) khi modal xuất hiện hoặc biến mất, bạn có thể bỏ class này nếu không muốn modal có hiệu ứng fade..fade dùng để thêm hiệu ứng fade (mờ dần) khi modal xuất hiện hoặc biến mất, bạn có thể bỏ class này nếu không muốn modal có hiệu ứng fade.
  • Thuộc tính role=”dialog” để tạo 1 hộp thoại cho modal nổi giữa màn hình, các vùng khác ngoài hộp thoại sẽ hiện màu tối.role=”dialog” để tạo 1 hộp thoại cho modal nổi giữa màn hình, các vùng khác ngoài hộp thoại sẽ hiện màu tối.
  • Class .modal-dialog để thiết lập chiều rộng và lề (margin) cho modal..modal-dialog để thiết lập chiều rộng và lề (margin) cho modal.

Phần “nội dung Modal”:

  • Phần tử div với class=”modal-content” để định nghĩa phong cách cho modal (viền, màu nền, …).class=”modal-content” để định nghĩa phong cách cho modal (viền, màu nền, …).
  • Bên trong phần tử div, chúng ta có thể thêm phần đầu (header), phần thân (body) và phần chân (footer) của modal.
  • Class .modal-header định nghĩa phong cách phần đầu modal..modal-header định nghĩa phong cách phần đầu modal.
  • Nút bên trong phần đầu có thuộc tính data-dismiss=”modal” để đóng modal nếu được nhấn.data-dismiss=”modal” để đóng modal nếu được nhấn.
  • Class .close để phong cách cho nút đóng, và class .modal-title để tạo phong cách cho văn bản phần đầu modal..close để phong cách cho nút đóng, và class .modal-title để tạo phong cách cho văn bản phần đầu modal.
  • Class .modal-body để định nghĩa phong cách cho phần thân modal..modal-body để định nghĩa phong cách cho phần thân modal.
  • Class .modal-footer dùng để định nghĩa phong cách cho phần chân footer..modal-footer dùng để định nghĩa phong cách cho phần chân footer.

Kích thước Modal

Để tạo thay đổi kích thước modal, chúng ta có thể thêm class .modal-sm cho các modal có kích thước nhỏ và class .modal-lg cho các modal có kích thước lớn. Bạn thêm các class này trong thẻ div chứa class .modal-dialog. Ngoài ra, bạn có thể chỉnh kích thước bằng thuộc tính style=”width:xxx; height:xxx”..modal-sm cho các modal có kích thước nhỏ và class .modal-lg cho các modal có kích thước lớn. Bạn thêm các class này trong thẻ div chứa class .modal-dialog. Ngoài ra, bạn có thể chỉnh kích thước bằng thuộc tính style=”width:xxx; height:xxx”.

Small Modal

Đối với một modal dialog nhỏ, hãy thêm class .modal-sm vào .modal-dialog.modal-sm vào .modal-dialog

Large Modal

Đối với một modal dialog lớn, hãy thêm class .modal-lg vào .modal-dialog.modal-lg vào .modal-dialog

Remove Fade Effect

Bạn có thể loại bỏ class .fade để loại bỏ hiệu ứng fade-in / fade-out..fade để loại bỏ hiệu ứng fade-in / fade-out.

Kết luận:

Như vậy, bài viết đã hướng dẫn cho các bạn cách tạo 1 modal đơn giản trong Bootstrap, bạn có thể chèn thêm video, form, hình ảnh, … để làm nội dung của modal phong phú hơn.

Tham khảo:

https://www.quackit.com/bootstrap/bootstrap_4/tutorial/

All rights reserved

Hướng dẫn edit modal bootstrap - chỉnh sửa modal bootstrap

All rights reserved 5 phút đọc

Đã đăng vào thg 2 22, 2017 6:58 SA 5 phút đọc popup. Tại sao nó tiện lợi? Popup không chỉ hiển thị message, dialog,...popup còn có thể show rất nhiều thông tin khác. Chúng ta có thể lấy ví dụ cụ thể như thế này: Bạn đang có 1 website bán hàng. Ở homepage hoặc category page, có rất nhiều sản phẩm được show tuy nhiên thông tin sản phẩm rất ít. Khi khách hàng muốn xem chi tiết sản phẩm đó thì phải đi tới trang detail sản phẩm. Như vậy rất có thể làm mất thời gian của khách hàng (trường hợp mạng yếu, kết nối chậm). Vậy giải pháp ở đây là gì để cho khách hàng không cần vào page detail mà vẫn có thể xem các thông tin cần thiết của sản phẩm? Rất đơn giản, đó chính là popup quickview. Popup quickview này có thể chứa một số thông tin cần thiết của sản phẩm mà khách hàng muốn biết nhất. Nó có thể hiển thị ngay tại homepage hay category page khi click vào 1 button nào đó mà không cần phải đi tới trang chi tiết của sản phẩm. Và còn rất nhiều tiện lợi khác khi chúng ta sử dụng popup trên website của mình. Vậy thì làm thế nào để tạo popup này? Câu trả lời có ngay tại đây. Rất đơn giản, chúng ta sử dụng bootstrap để tạo popup. Bạn hỏi tôi, có thể dùng thư viện khác để tạo popup không? Tôi xin trả lời rằng, có thể. Bạn có thể dùng bất cứ thư viện js nào hoặc bạn cũng có thể tự viết 1 đoạn javascript để tạo 1 popup. Nhưng chúng ta đang sử dụng bootstrap cho nên ngay bây giờ, hãy quay về vấn đề chính thôi nào.

Cách sử dụng

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.

Hướng dẫn edit modal bootstrap - chỉnh sửa modal bootstrap

Để hiện thị được popup như hình trên, các bạn có thể sử dụng đoạn code như sau

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div id="myModal"  class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">This is Modal</h4>
      </div>
      <div class="modal-body">
        <p>Modal body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Có thể giải thích các thành phần chính như sau:

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 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 là lệnh mở một Modal Popup trong Bootstrap

  • Bạn có thể sử dụng button hoặc thẻ hoặc để gọi popup nhưng phải luôn có 2 thuộc tính ở trên. hoặc để gọi popup nhưng phải luôn có 2 thuộc tính ở trên.

Popup:

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.

Close Modal data-dismiss="modal" là dùng để close popup. Để định dạng thành phần close popup, bạn có thể sử dụng , hoặc . Tuy nhiên, bắt buộc phải có lệnh này để có thể close được popup. Ngoài ra, bạn có thể thêm class="close" để sử dụng sẵn css của bootstrap cho thành phần này.data-dismiss="modal" là dùng để close popup. Để định dạng thành phần close popup, bạn có thể sử dụng