Đã đă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.
Đã đă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.
Để hiện thị được popup như hình trên, các bạn có thể sử dụng đoạn code như sau
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:
Thẻ 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 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
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 , 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.
Kích thước tùy chọn cho popup
Bootstrap cho phép các modal có hai kích thước tùy chọn được định nghĩa bằng các class được đặt cùng với .modal-dialog là .modal-lg và .modal-sm.modal-dialog là .modal-lg và .modal-sm
1. Large Modal Để show large modal, có thể sử dụng class modal-lg với đoạn code sau: Để show large
modal, có thể sử dụng class modal-lg với đoạn code sau:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
This is body of large modal
</div>
</div>
</div>
Hiển thị kết quả:
2. Small Modal Để show small modal, có thể sử dụng class modal-sm với đoạn code sau: Để show small modal, có thể sử dụng class modal-sm với đoạn code sau:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
This is body of small modal
</div>
</div>
</div>
Hiển thị kết quả:
2. Small Modal Để show small modal, có thể sử dụng class modal-sm với đoạn code sau:
Loại bỏ hiệu ứng khi hiển thị
có class .fade. Tác dụng của class này là gì? Đó chính là class thêm hiệu ứng dạng fade khi popup hiển thị. Nếu bạn muốn các modal hiển thị một cách đơn giản thay vì có các hiệu ứng như fade, hãy xóa bỏ class .fade khỏi markup modal của bạn.
Hãy để ý kỹ, trong có class .fade. Tác dụng của class này là gì? Đó chính là class thêm hiệu ứng dạng fade khi popup hiển thị. Nếu bạn muốn các modal hiển thị một cách đơn giản thay vì có các hiệu ứng như fade, hãy xóa bỏ class .fade khỏi markup modal của bạn.
Tóm lại, chỉ cần vài thao tác đơn giản, bạn đã có thể tạo được các popup cho website của mình. Chúc các bạn thành công!