Bootstrap - Plugin phương thức
Phương thức là một cửa sổ con được xếp trên cửa sổ mẹ của nó. Thông thường, mục đích là hiển thị nội dung từ một nguồn riêng biệt có thể có một số tương tác mà không cần rời khỏi cửa sổ mẹ. Cửa sổ con có thể cung cấp thông tin, tương tác hoặc hơn thế nữa.
Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần modal.js. Khác, như đã đề cập trong chương Bootstrap Plugins Tổng quan , bạn có thể đưa bootstrap.js hoặc minified bootstrap.min.js .
Sử dụng
Bạn có thể chuyển đổi nội dung ẩn của plugin phương thức -
Via data attributes - Đặt thuộc tính data-toggle = "modal" trên phần tử bộ điều khiển, chẳng hạn như nút hoặc liên kết, cùng với data-target = "#identifier" hoặc là href = "#identifier" để nhắm mục tiêu một phương thức cụ thể (với id = "ID") để chuyển đổi.
Via JavaScript - Sử dụng kỹ thuật này, bạn có thể gọi một phương thức với id = "id =" mã định danh "bằng một dòng JavaScript -
$('#identifier').modal(options)
Thí dụ
Ví dụ về cửa sổ phương thức tĩnh được hiển thị trong ví dụ sau:
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Add some text here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Details of the preceding code −
Để gọi ra cửa sổ phương thức, bạn cần có một số loại kích hoạt. Bạn có thể sử dụng một nút hoặc một liên kết. Ở đây chúng tôi đã sử dụng một nút.
Nếu bạn nhìn vào đoạn mã trên, bạn sẽ thấy rằng trong thẻ <button>, data-target = "#myModal"là mục tiêu của phương thức mà bạn muốn tải trên trang. Mã này cho phép bạn tạo nhiều chế độ trên trang và sau đó có các trình kích hoạt khác nhau cho từng chế độ đó. Bây giờ, để rõ ràng, bạn không tải nhiều chế độ cùng một lúc, nhưng bạn có thể tạo nhiều chế độ trên các trang để tải vào các thời điểm khác nhau.
Có hai lớp cần lưu ý trong phương thức -
Đầu tiên là .modal, chỉ đơn giản là xác định nội dung của <div> như một phương thức.
Và thứ hai là .fadelớp học. Khi phương thức được chuyển đổi, nó sẽ làm cho nội dung mờ dần và mờ đi.
aria-labelledby = "myModalLabel", tham chiếu thuộc tính tiêu đề phương thức.
Thuộc tính aria-hidden = "true" được sử dụng để giữ cho Cửa sổ Phương thức vô hình cho đến khi có kích hoạt (như một cú nhấp chuột vào nút được liên kết).
<div class = "modal-header">, modal-header là lớp để xác định kiểu cho tiêu đề của cửa sổ modal.
class = "close", là một lớp CSS đóng để đặt kiểu cho nút Đóng của cửa sổ phương thức.
data-dismiss = "modal", là một thuộc tính dữ liệu HTML5 tùy chỉnh. Ở đây nó được sử dụng để đóng cửa sổ phương thức.
class = "modal-body", là một lớp CSS của Bootstrap CSS để thiết lập kiểu cho nội dung của cửa sổ phương thức.
class = "modal-footer", là một lớp CSS của Bootstrap CSS để thiết lập kiểu cho chân trang của cửa sổ phương thức.
data-toggle = "modal", Chuyển đổi dữ liệu thuộc tính dữ liệu tùy chỉnh dữ liệu HTML5 được sử dụng để mở cửa sổ phương thức.
Tùy chọn
Có một số tùy chọn nhất định có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript để tùy chỉnh giao diện của Cửa sổ phương thức. Bảng sau liệt kê các tùy chọn -
Tên tùy chọn | Loại / Giá trị mặc định | Tên thuộc tính dữ liệu | Sự miêu tả |
---|---|---|---|
phông nền | boolean hoặc chuỗi 'static' Mặc định: true | phông nền dữ liệu | Chỉ định tĩnh cho phông nền, nếu bạn không muốn phương thức bị đóng khi người dùng nhấp vào bên ngoài phương thức. |
bàn phím | boolean Mặc định: true | bàn phím dữ liệu | Đóng phương thức khi nhấn phím thoát; đặt thành false để tắt. |
chỉ | boolean Mặc định: true | hiển thị dữ liệu | Hiển thị phương thức khi khởi tạo. |
Xa xôi | đường dẫn Mặc định: false | dữ liệu từ xa | Sử dụng phương thức .load jQuery , đưa nội dung vào phần thân phương thức. Nếu một href có URL hợp lệ được thêm vào, nó sẽ tải nội dung đó. Ví dụ về điều này được hiển thị bên dưới: |
Phương pháp
Dưới đây là một số phương thức hữu ích có thể được sử dụng với modal ().
phương pháp | Sự miêu tả | Thí dụ |
---|---|---|
Options - .modal (tùy chọn) | Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một đối tượng tùy chọn tùy chọn. | |
Toggle - .modal ('chuyển đổi') | Chuyển đổi thủ công một phương thức. | |
Show - .modal ('hiển thị') | Mở một phương thức theo cách thủ công. | |
Hide - .modal ('ẩn') | Ẩn một phương thức theo cách thủ công. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các phương thức:
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>
Chỉ cần nhấp vào nút Esc và cửa sổ phương thức sẽ thoát ra.
Sự kiện
Bảng sau liệt kê các sự kiện để làm việc với phương thức. Những sự kiện này có thể được sử dụng để nối vào hàm.
Biến cố | Sự miêu tả | Thí dụ |
---|---|---|
show.bs.modal | Kích hoạt sau khi phương thức hiển thị được gọi. | |
show.bs.modal | Kích hoạt khi phương thức đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). | |
hide.bs.modal | Kích hoạt khi phương thức ẩn đối tượng đã được gọi. | |
hidden.bs.modal | Kích hoạt khi phương thức hoàn tất bị ẩn khỏi người dùng. | |
Thí dụ
Ví dụ sau minh họa việc sử dụng các sự kiện:
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Click on close button to check Event functionality.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal('hide')})});
</script>
<script>
$(function () { $('#myModal').on('hide.bs.modal', function () {
alert('Hey, I heard you like modals...');})
});
</script>
Như đã thấy trong màn hình trên, nếu bạn nhấp vào nút Đóng tức là ẩn sự kiện, một thông báo cảnh báo sẽ hiển thị.