1- Bootstrap Modal
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
Modal Example
Open modal
Modal Heading
×
Modal body..
Close
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
Modal Title
×
Modal body..
Close
| 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
Modal Title
×
Modal body..
Close
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
Modal Title
Modal body..
Close
2- Modal & jQuery
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. |
3- Sự kiện của Modal
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!'];
}];