W3.CSS โมด อล
โมดอลคือกล่องโต้ตอบ/หน้าต่างป๊อปอัปที่แสดงที่ด้านบนของหน้าปัจจุบัน:
W3.CSS Modal Classes
W3.CSS มีคลาสต่อไปนี้สำหรับหน้าต่างโมดอล:
ระดับ | กำหนด |
---|---|
w3-modal | โมดอลคอนเทนเนอร์ |
w3-modal-content | เนื้อหาที่เป็นกิริยาช่วย |
สร้างโมดอล
คลาสw3-modalกำหนดคอนเทนเนอร์สำหรับ modal
คลาสw3-modal-contentกำหนดเนื้อหาที่เป็นกิริยาช่วย
เนื้อหาโมดอลสามารถเป็นองค์ประกอบ HTML ใดก็ได้ (div, หัวเรื่อง, ย่อหน้า, รูปภาพ ฯลฯ)
ตัวอย่าง
<!-- 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>
เปิด Modal
ใช้องค์ประกอบ HTML ใด ๆ เพื่อเปิดโมดอล อย่างไรก็ตาม มักเป็นปุ่มหรือลิงก์
เพิ่ม แอตทริบิวต์ onclickและชี้ไปที่รหัสของโมดอล ( id01ในตัวอย่างของเรา) โดยใช้เมธอด document.getElementById()
ปิด Modal
หากต้องการปิด modal ให้เพิ่ม คลาส ปุ่ม w3ให้กับองค์ประกอบพร้อมกับแอตทริบิวต์ onclick ที่ชี้ไปที่ id ของ modal ( id01 ) คุณยังสามารถปิดได้ด้วยการคลิกภายนอกโมดอล (ดูตัวอย่างด้านล่าง)
เคล็ดลับ: &ครั้ง; เป็นเอนทิตี HTML ที่ต้องการสำหรับไอคอนปิด แทนที่จะเป็นตัวอักษร "x"
ส่วนหัวและส่วนท้ายของโมดอล
ใช้ คลาส w3-containerเพื่อสร้างส่วนต่าง ๆ ภายในเนื้อหาโมดอล:
ตัวอย่าง
<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>
Modal เป็นการ์ด
หากต้องการแสดงโมดอลเป็นการ์ด ให้เพิ่ม คลาส w3-card-*คลาสใดคลาสหนึ่งลงใน คอนเทนเนอร์ w3-modal-content :
ตัวอย่าง
<div class="w3-modal-content w3-card-4">
Modals เคลื่อนไหว
ใช้ คลาส w3-animate-zoom|top|bottom|right|left ใด ๆ เพื่อเลื่อนใน modal จากทิศทางเฉพาะ:
ตัวอย่าง
<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">
คุณยังสามารถจางลงในสีพื้นหลังของโมดอลได้โดยการตั้งค่า คลาส w3-animate-opacityบนองค์ประกอบ w3-modal:
ตัวอย่าง
<div class="w3-modal w3-animate-opacity">
โมดอลอิมเมจ
คลิกที่ภาพเพื่อแสดงเป็นโมดอลในขนาดเต็ม:
ตัวอย่าง
<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>
แกลลอรี่รูปภาพ Modal
คลิกที่ภาพเพื่อแสดงขนาดเต็ม:
ตัวอย่าง
<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>
แบบฟอร์มเข้าสู่ระบบโมดอล
ตัวอย่างนี้สร้าง modal สำหรับการเข้าสู่ระบบ:
ตัวอย่าง
Modal พร้อมเนื้อหาแบบแท็บ
ตัวอย่างนี้สร้างโมดอลที่มีเนื้อหาแบบแท็บ:
ตัวอย่าง
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":
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.