W3.CSS Modal
กิริยาเป็นกล่องโต้ตอบ / หน้าต่างป๊อปอัพที่แสดงอยู่ด้านบนของหน้าปัจจุบัน:
วิธีการสร้าง Modal
ตัวอย่าง
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> ลองตัวเอง» "การ W3 กิริยา" ชั้น
กิริยาสามารถภาชนะ HTML ใด ๆ (เช่น <div>) กับ class = "W3 กิริยา"
"การ W3 กิริยาเนื้อหา" ชั้น
เนื้อหากิริยาทั้งหมดควรอยู่ในภาชนะ HTML ที่มี class = "W3 กิริยาเนื้อหา"
เนื้อหา Modal สามารถเป็นองค์ประกอบ HTML ใด ๆ (หัวย่อหน้าภาพ ฯลฯ )
เปิด Modal
ใช้องค์ประกอบ HTML ใด ๆ เพื่อเปิดกิริยา นี้มักจะเป็นปุ่มหรือการเชื่อมโยง
เพิ่มแอตทริบิวต์ onclick และชี้ไปที่ ID ของกิริยา (id01 ในตัวอย่างของเรา) โดยใช้ document.getElementById () วิธีการและระบุรหัสเฉพาะที่ตรงกับปุ่ม "ทริกเกอร์" (id01)
ปิด Modal
เพื่อปิดกิริยาเพิ่มระดับ W3-closebtn เพื่อองค์ประกอบร่วมกับแอตทริบิวต์ onclick ที่ชี้ไปยัง ID ของกิริยาที่ (id01) นอกจากนี้คุณยังสามารถปิดได้โดยคลิกที่ด้านนอกของคำกริยา (ดูตัวอย่างด้านล่าง)
 | และครั้ง; (×) เป็นนิติบุคคล HTML ที่เป็นไอคอนที่แนะนำสำหรับปุ่มปิดมากกว่าตัวอักษร "X" |
|---|
Modal ส่วนหัวและส่วนท้าย
ภายใน <div> กับ class = "W3 กิริยาเนื้อหา" เรียนใช้ 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-closebtn">×</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> ลองตัวเอง» ในฐานะที่เป็นคำกริยาบัตร
ในการแสดงกิริยาเป็นบัตรเพิ่ม W3-card- ชั้น * เพื่อภาชนะ W3 กิริยาเนื้อหา:
Modals เคลื่อนไหว
ใช้ใด ๆ ของ W3-เคลื่อนไหว-ซูม | ด้านบน | ด้านล่าง | ขวา | เรียนทางด้านซ้ายเพื่อเลื่อนในกิริยาจากทิศทางที่เฉพาะเจาะจง:
ตัวอย่าง
<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 กิริยา):
Modal ภาพ
คลิกที่ภาพเพื่อแสดงขนาดเต็มรูปแบบ:
ตัวอย่าง
<img src="img_fjords.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_fjords.jpg">
</div>
ลองตัวเอง» แกลเลอรี่ภาพ Modal
คลิกที่ภาพเพื่อแสดงในขนาดที่เต็มรูปแบบ:
ตัวอย่าง
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.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
ตัวอย่างนี้สร้างคำกริยาที่มีเนื้อหาแท็บ A:
ปิด Modal
ในตัวอย่างข้างต้นเราจะใช้ปุ่มเพื่อปิดกิริยา แต่ด้วยนิด ๆ หน่อย ๆ ของ JavaScript คุณยังสามารถปิดกิริยาเมื่อคลิกนอกของกล่องกิริยา:
ตัวอย่าง
// 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";
}
}
ลองตัวเอง»