Sử dụng modal bootstrap 5

Bài viết sẽ giúp các bạn tao 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.

Tạo 1 modal đơn giản
Bạn có thể nhúng tập tin “modal.js” hoặc “bootstrap.js” hoặc “bootstrap.min.js” để sử dụng chức năng Modal trong Bootstrap.

	
Model trong Bootstrap - dammio.com
	
	Mở Modal
	
	

		

			
			

				

					×
					
Phần đầu Modal
				
				

					
Nội dung của Modal.
				
				

					Đóng
				
			
		
	

Giải thích ví dụ:
– Phần “Kích hoạt”: Để kích hoạt 1 Modal, chúng ta cần sử dụng 1 nút nhấn hay 1 liên kết. Sau đó thêm 1 thuộc tính: data-toggle=”modal” để mở cửa sổ modal, data-target=”#myModal” để chỉ đến id của modal cần mở. Thẻ div chứa modal phải có id tương ứng với giá trị id của thuộc tính data-target để kích hoạt modal cần hiển thị (trong ví dụ id là “myModal). Lớp .modal mô tả 1 modal và nội dung của nó. Lớp .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ỏ lớp 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. Lớp .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 lớp 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. Lớp .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. Lớp .close để phong cách cho nút đóng, và lớp .modal-title để tạo phong cách cho văn bản phần đầu Modal. Lớp .modal-body để định nghĩa phong cách cho phần thân Modal. Lớp .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 lớp .modal-sm cho các modal có kích thước nhỏ và lớp .modal-lg cho các modal có kích thước lớn. Bạn thêm các lớp này trong thẻ div chứa lớp .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”.

...



...



...

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.

Như các bạn đã biết thì hiện nay tất cả các website đều sử dụng popup để đưa ra những thông tin cần thiết cho khách hàng. Vậy cách tạo popup với bootstrap modal plugin như thế nào? Mời các bạn cùng tham khảo bài viết đưới đây của blog getbootstrap nhé.

Hướng dẫn sử dụng modal plugin bootstrap

Trong bootstrap đã có sẵn plugin modal bootstrap rồi, và khi bạn muốn sử dụng nó thì chỉ cần gọi nó lên và sử dụng thôi.

Cách sử dụng plugin modal bootstrap

Và nếu các bạn muốn hiển thị được popup như hình ở trên thì bạn chỉ cần sủ dụng đoạn code như dưới đây:

Launch demo modal

×

This is Modal

Modal body

Close
Save changes

Trong đó:

Nút gọi popup:

• data-target=”myModal”: có tác dụng dùng để xác định popup nào đã được gọi, và như ở vd trên thì chúng tôi gọi popup có id là: #myModal.
• data-toggle=”modal”: là câu lệnh dùng để mở một modal popup ở trong bootstrap.
• Bạn cũng có thể sử dụng button hay thẻ hoặc để gọi popup, nhưng tất cả đều phải có 2 thuộc tính ở trên nhé.

Popup:

• Thẻ cha chứa id=”myModal” có tác dụng dùng để xác định popup nào được gọi khi bạn click vào button, class .modal dùng để xác định nội dung nào của popup.
• Class .fade: chính là hiệu ứng trasition với fade in và fade out.
• role=”dialog” hiển thị popup dạng dialog.

Modal content

Là nơi dùng để chứa nội dung chính mà bạn muốn hiển thị ở trong popup, và ở phần này thì bạn có thể tuỳ chỉnh hay giữa nguyên theo mặc định của bootstrap nếu như bạn muốn.

Close Modal data-dismiss=”modal” có tác dụng tắt popup.

Các kích thước tuỳ chọn cho popup

Hiện nay bootstrap cho phép các modal có 2 kích thước tuỳ chọn được định nghĩa bằng class đặt cùng với: .modal-dialog là .modal-lg và .modal-sm

Large Modal: Để có thể sử dụng large modal thì bạn chỉ cần thêm class modal-lg với đoạn code dưới đây:

Large modal

This is body of large modal

Kết quả hình ảnh.

Large Modal

Small modal: để có thể sử dụng small modal thì bạn chỉ cần thêm class modal-sm với đoạn code dưới đây:

Small modal

This is body of small modal

Kết quả hình ảnh:

Small modal

Cách loại bỏ hiệu ứng khi hiển thị Popup

Với

-> Tác dụng của class này là thêm hiệu ứng dạng fade khi popup hiển thị. Và nếu như bạn muốn modal hiển thị bình thường và đơn giản thì bạn chỉ cần xoá bỏ class .fade khỏi markup modal là xong.

Hi vọng với những chia sẻ cơ bản về plugin modal trong bootstrap sẽ giúp bạn có thêm kiến thức về bootstrap nhé. Chúc các bạn thành công.

Đọc tiếp