Hướng dẫn và ví dụ Bootstrap Modal
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Modal là một Dialog (hộp thoại) hoặc là một Popup (cửa sổ bật lên), nó hiển thị phía trên tất cả các nội dung khác của trang hiện tại. Mục đích của Modal là thông báo với người dùng điều gì đó của ứng dụng hoặc chờ đợi người dùng nhập vào các thông tin.
Mặc dù Javascript có hỗ trợ một vài dialog (hộp thoại) khác nhau như Confirm, Alert, Open File, Save file,.. nhưng rõ ràng các dialog này không thể tùy biến, và vì vậy bạn mong chờ một cái gì đó tốt hơn.
Trước hết hãy xem một ví dụ:
modal-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- 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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Dưới đây là cấu trúc của một Modal. Phần tử div.modal-content là nơi bạn quan tâm, nó bao gồm 3 vùng Header, Body & Footer, và bạn có thể tùy biến trên cả 3 vùng đó.
Modal Attributes
<div class="modal" id="myModal"
data-backdrop="static"
data-keyboard="false"
tabindex="-1"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Title</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>
| Thuộc tính (Attribute) |
Mô tả |
| data-backdrop | Thuộc tính này có hai giá trị là true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal. |
| data-keyboard | Thuộc tính này có hai giá trị là true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC. |
| aria-labelledby | Thuộc tính của HTML5 |
| aria-hidden | Thuộc tính của HTML5 |
Lớp .fade cho phép bạn tạo ra hiệu ứng khi ẩn hoặc hiện Modal.
.fade
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ví dụ, tạo một Modal không chứa nút "X" (Thấy tại góc trên bên phải của Modal).
Modal without X button
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Bạn có thể sử dụng JQuery để tương tác với Modal, chẳng hạn ẩn hoặc hiện Modal.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Hoặc đầy đủ hơn:
$('#myModal').modal(options);
// Example:
var options = {
'backdrop' : 'static',
'keyboard' : true,
'show' : true,
'focus' : false
}
| Tùy chọn | Mô tả |
| backdrop | Tùy chọn này có hai giá trị là true hoặc static. Mặc định là true, có nghĩa là người dùng có thể nhấn vào nền (background) để đóng Modal. |
| keyboard | Tùy chọn này có hai giá trị là true hoặc false. Mặc định là false, nếu là true người dùng có thể đóng Modal bằng cách nhấn nút ESC. |
| show | Tùy chọn này có 2 giá trị là true hoặc false. Dùng để hiển thị hoặc ẩn Modal. |
| focus | Tùy chọn này có 2 giá trị là true hoặc false, mặc định là false. Nếu là true, Modal sẽ được focus khi nó được khởi tạo. |
Có một vài sự kiện được phát ra (fired) khi Modal mở hoặc đóng. Và bạn có bắt các sự kiện này để thực hiện một điều gì đó. Sử dụng phương thức "on" của jQuery để giàng buộc sự kiện với hàm xử lý.
| Sự kiện | Mô tả |
| show.bs.modal | Sự kiện này phát ra (fired) ngay trước khi Modal hiển thị. |
| shown.bs.modal | Sự kiện này phát ra ngay sau khi Modal hiển thị. |
| hide.bs.modal | Sự kiện này phát ra ngay trước khi Modal bị ẩn. |
| hidden.bs.modal | Sự kiện này phát ra ngay sau khi Modal bị ẩn. |
Bạn có thể xử lý một trong các sự kiện trên giống dưới đây:
$('#myModal').on('shown.bs.modal', function (e) {
alert('Modal is successfully shown!');
});
*
