Phương thức W3.CSS
Phương thức là một hộp thoại / cửa sổ bật lên được hiển thị trên đầu trang hiện tại:
Các lớp phương thức W3.CSS
W3.CSS cung cấp các lớp sau cho các cửa sổ phương thức:
| Lớp học | Xác định |
|---|---|
| w3-modal | Vùng chứa phương thức |
| w3-modal-content | Nội dung phương thức |
Tạo một phương thức
Lớp w3-modal định nghĩa một vùng chứa cho một phương thức.
Lớp w3-modal-content xác định nội dung phương thức.
Nội dung phương thức có thể là bất kỳ phần tử HTML nào (div, tiêu đề, đoạn văn, hình ảnh, v.v.).
Thí dụ
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
Mở một phương thức
Sử dụng bất kỳ phần tử HTML nào để mở phương thức. Tuy nhiên, đây thường là một nút hoặc một liên kết.
Thêm thuộc tính onclick và trỏ đến id của phương thức ( id01 trong ví dụ của chúng tôi), sử dụng phương thức document.getElementById ().
Đóng một phương thức
Để đóng một phương thức, hãy thêm lớp nút w3 vào một phần tử cùng với thuộc tính onclick trỏ đến id của phương thức ( id01 ). Bạn cũng có thể đóng nó bằng cách nhấp vào bên ngoài phương thức (xem ví dụ bên dưới).
Mẹo: & lần; là thực thể HTML được ưu tiên cho các biểu tượng gần gũi, thay vì ký tự "x".
Đầu trang và chân trang phương thức
Sử dụng các lớp w3-container để tạo các phần khác nhau bên trong nội dung phương thức:
Thí dụ
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
Phương thức như một thẻ
Để hiển thị phương thức dưới dạng thẻ, hãy thêm một trong các lớp w3-card- * vào vùng chứa w3-modal-content :
Thí dụ
<div class="w3-modal-content w3-card-4">
Chế độ động vật
Sử dụng bất kỳ lớp nào trong số các lớp w3-animate-zoom | top | bottom | right | left để trượt theo phương thức từ một hướng cụ thể:
Thí dụ
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Bạn cũng có thể làm mờ màu nền của phương thức bằng cách đặt lớp w3-animate-opacity trên phần tử w3-modal:
Thí dụ
<div class="w3-modal w3-animate-opacity">
Hình ảnh Phương thức
Nhấp vào hình ảnh để hiển thị nó dưới dạng một phương thức, ở kích thước đầy đủ:
Thí dụ
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
Thư viện hình ảnh phương thức
Bấm vào một hình ảnh để hiển thị nó ở kích thước đầy đủ:
Thí dụ
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Biểu mẫu đăng nhập phương thức
Ví dụ này tạo ra một phương thức để đăng nhập:
Thí dụ
Phương thức với nội dung theo tab
Ví dụ này tạo một phương thức với nội dung theo thẻ:
Thí dụ
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.