W3.CSS modal oyna
Modal oyna nima?
Modal oyna — joriy sahifa ustida ko‘rsatiladigan dialog oynasi.
W3.CSS modal oynalarni yaratish va bezash uchun klasslarni taqdim etadi.
Modal oynani ochish uchun tugmani bosing:
W3.CSS modal oyna klasslari
W3.CSS modal oynalar uchun quyidagi klasslarni taqdim etadi:
| Klass | Vazifasi |
|---|---|
| w3-modal | Modal oyna konteyneri |
| w3-modal-content | Modal oyna kontenti |
Modal oyna yaratish
w3-modal klassi modal oyna uchun konteynerni belgilaydi.
w3-modal-content klassi modal oyna kontentini belgilaydi.
Modal oyna kontenti har qanday HTML element bo‘lishi mumkin (div’lar, sarlavhalar, paragraflar, rasmlar va h.k.).
Misol
<!-- 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>
O‘zingiz sinab ko‘ring »
Modal oynani ochish
Modal oynani ochish uchun istalgan HTML elementdan foydalaning. Biroq bu ko‘pincha tugma yoki havola bo‘ladi.
onclick atributini qo‘shing va document.getElementById() metodi yordamida modal oynaning id’siga (bizning misolimizda id01) ishora qiling.
Modal oynani yopish
Modal oynani yopish uchun elementga w3-button klassini modal oyna id’siga (id01) ishora qiluvchi onclick atributi bilan birga qo‘shing. Uni modal oynadan tashqariga bosish orqali ham yopishingiz mumkin (quyidagi misolga qarang).
Maslahat: Yopish ikonkalari uchun "x" harfidan ko‘ra × HTML belgisi (entity) afzalroq.
Modal oyna sarlavhasi va pastki qismi
Modal oyna kontenti ichida turli bo‘limlar yaratish uchun w3-container klasslaridan foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
Kartochka ko‘rinishidagi modal oyna
Modal oynani kartochka ko‘rinishida ko‘rsatish uchun w3-modal-content konteyneriga w3-card-* klasslaridan birini qo‘shing:
Animatsiyali modal oynalar
Modal oynani ma’lum bir yo‘nalishdan surib chiqarish uchun w3-animate-* klasslaridan istalganini ishlating:
Misol
<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">
O‘zingiz sinab ko‘ring »
w3-modal elementiga
w3-animate-opacity klassini qo‘shib, modal oyna fon rangini ham asta paydo qilishingiz mumkin:
Modal rasm
Rasmni to‘liq o‘lchamda modal oynada ko‘rsatish uchun uni bosing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Modal rasmlar galereyasi
Rasmni to‘liq o‘lchamda ko‘rsatish uchun uni bosing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Modal kirish formasi
Bu misol tizimga kirish uchun modal oyna yaratadi:
Tabli kontentga ega modal oyna
Bu misol tabli kontentga ega modal oyna yaratadi:
Modal oynani yopish
Yuqoridagi misollarda modal oynani yopish uchun tugmadan foydalanamiz. Biroq biroz JavaScript yordamida modal oynani uning tashqarisiga bosilganda ham yopish mumkin:
Misol
// Get the modal
const modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", event => {
if (event.target === modal) {
modal.style.display = "none";
}
});
O‘zingiz sinab ko‘ring »
Murakkabroq: Lightbox (modal rasmlar galereyasi)
Bu misol "lightbox" yaratish uchun modal oyna ichiga rasmlar slayd-shousini qanday qo‘shishni ko‘rsatadi:
Maslahat: Slayd-shoular haqida ko‘proq bilish uchun W3.CSS slayd-shou bobiga tashrif buyuring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!