Phương thức W3.CSS
Một phương thức là một hộp thoại/cửa sổ bật lên được hiển thị ở đầ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ửa sổ phương thức:
| Lớp học | Định nghĩa |
|---|---|
| phương thức w3 | Vùng chứa phương thức |
| nội dung w3-modal | Nội dung phương thức |
Tạo một phương thức
Lớp w3-modal định nghĩa vùng chứa cho một phương thức.
Lớp nội dung phương thức w3 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.).
Ví 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> Hãy tự mình thử » 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à thực thể HTML ưa thích cho các biểu tượng đóng, thay vì chữ cái "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:
Ví 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> Hãy tự mình thử »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 nội dung w3-modal :
Phương thức hoạt hình
Sử dụng bất kỳ lớp w3-animate-zoom|top|bottom|right|left nào để trượt theo phương thức từ một hướng cụ thể:
DướiVí 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">
Hãy tự mình thử »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:
Hình ảnh phương thức
Nhấp vào hình ảnh để hiển thị dưới dạng phương thức, ở kích thước đầy đủ:
Ví 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>
Hãy tự mình thử »Thư viện hình ảnh phương thức
Bấm vào hình ảnh để hiển thị ở kích thước đầy đủ:
Ví 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>
Hãy tự mình thử »Mẫu đăng nhập phương thức
Ví dụ này tạo một phương thức để đăng nhập:
Phương thức với nội dung theo thẻ
Ví dụ này tạo một phương thức có nội dung theo thẻ:
Đóng phương thức
Trong các ví dụ trên, chúng tôi sử dụng một nút để đóng phương thức. Tuy nhiên, với một chút JavaScript, bạn cũng có thể đóng phương thức khi nhấp vào bên ngoài hộp phương thức:
Ví dụ
// 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";
}
}
Hãy tự mình thử »Nâng cao: Hộp đèn (Thư viện hình ảnh phương thức)
Ví dụ này cho thấy cách thêm trình chiếu hình ảnh bên trong một phương thức để tạo "hộp đèn":
Mẹo: Để tìm hiểu thêm về trình chiếu, hãy truy cập chương Trình trình chiếu W3.CSS của chúng tôi.
