Giống như Bootstrap 3 thì Bootstrap 4 cũng hỗ trợ thư viện model dùng để tạo hộp thoại hiển thị popup, hình ảnh và video. Dưới đây là cách sử dụng modal trong Bootstrap 4 một cách chi tiết các bạn nhé!
Cách tạo model trong Bootstrap 4
<!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Kết quả như sau:
Khi nhất nút
Thêm hoạt ảnh cho Model
Sử dụng lớp .fade để thêm hiệu ứng mờ dần khi mở và đóng Model.
<div class="container"> <h2>Fading Modal</h2> <p>Add the "fade" class to the modal container if you want the modal to fade in on open and fade out on close.</p> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
Kích thước modal
Thay đổi kích thước của modal bằng cách thêm lớp .modal-sm cho modal nhỏ, lớp .modal-lg cho modal lớn hoặc .modal-xl cho modal cực lớn.
Thêm lớp kích thước vào phần tử <div> với hộp thoại .modal-class:
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
Extra Large Modal
<div class="modal-dialog modal-xl">
Căn giữa Modal
Căn giữa Modal thức theo chiều dọc và chiều ngang trong trang, với lớp .modal-dialog-centered.
<div class="modal-dialog modal-dialog-centered">
Modal cuộn
Khi bạn có nhiều nội dung bên trong Modal, một thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó:
Thí dụ
<div class="container"> <h2>Modal Scroll Example</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h1 class="modal-title">Modal Heading</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <h3>Some text to enable scrolling..</h3> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
Tuy nhiên, có thể chỉ cuộn bên trong modal, thay vì chính trang, bằng cách thêm .modal-dialog-scrollable vào .modal-dialog
Ví dụ:
<div class="container"> <h2>Modal Scroll Example</h2> <p>Use the .modal-dialog-scrollable class to enable scrolling inside the modal.</p> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h1 class="modal-title">Modal Heading</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <h3>Some text to enable scrolling..</h3> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
Lời kết:
Model trong Bootstrap 4 khá đá dạng. Các bạn có thể sử dụng modal để chèn ảnh, video, slide ... làm cho web của mình sinh động hơn đấy. Chúc các bạn thành công!
