W3.CSS Modal
Kalıcı geçerli sayfanın üst kısmında görüntülenen bir iletişim kutusu / açılan penceresidir:
Bir Modal Nasıl oluşturun
Örnek
<!-- 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> Kendin dene " "w3-modal" Sınıf
Kalıcı herhangi bir HTML konteyneri olabilir (like a <div>) class = "w3-modal" ile.
"w3-modal-content" Sınıf
Tüm modal içerik class = "w3-modal-içerik" ile bir HTML kapta yerleştirilmelidir.
Modal içeriği herhangi bir HTML elemanı olabilir (headings, paragraphs, images, etc.)
Bir Modal aç
modal açmak için herhangi bir HTML öğesi kullanın. Bu genellikle bir düğme veya bir bağlantıdır.
Ekle onclick modal kimliğine niteliği ve noktayı ( id01 in our example) kullanarak document. getElementById() document. getElementById() yöntemi ve eşleşen benzersiz bir kimlik belirtin "trigger" butonuna ( id01 ) .
Bir Modal Kapanış
Bir kalıcı kapatmak modal id işaret onclick özelliğine birlikte bir öğeye w3-closebtn sınıfını eklemek için ( id01 ) . Ayrıca modal dışında tıklayarak kapatabilirsiniz (see example below) .
&zamanlar; (×) yerine harfi yerine yakın düğmeler için tercih simgedir bir HTML varlıktır "x" .
Modal Üstbilgi ve Altbilgi
İçinde <div> class = "w3-modal-içerik" ile, kullanım w3-konteyner sınıflar modal farklı bölüm oluşturmak için:
Örnek
<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> Kendin dene " Bir Kart olarak Modal
W3-modal içerikli kaba w3-kart- * sınıfını eklemek bir kart olarak kalıcı görüntülemek için:
Hareketli Fiiller
: Belirli bir yönden modal kaymaya sol sınıflar | üst | | altta | right w3-animate-zoom herhangi birini kullanın
Örnek
<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">
Kendin dene " Sen de kalıcı arka plan rengi solmaya olabilir (w3-modal) :
modal Görüntü
Tam boyutunda görüntülemek için resmin üzerine tıklayın:
getElementById ( 'img01') .style.display = 'blok'" tarzı = "genişliği: 30%; imleci: işaretçi"> Örnek
<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>
Kendin dene " Modal Resim Galerisi
Tam boyutunda görüntülemek için bir resmin üzerine tıklayınız:
onClick (bu) "sınıfı =" w3-vurgulu-opaklık "> 
onClick (bu) "sınıfı =" w3-vurgulu-opaklık "> 
onClick (bu) "sınıfı =" w3-vurgulu-opaklık "> Örnek
<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>
Kendin dene " Modal Giriş Formu
Bu örnek oturum açmak için bir modal oluşturur:
modal Tab
Bu örnek sekmeli içeriğe sahip bir modal oluşturur:
Modal kapatın
Yukarıdaki örneklerde, modal kapatmak için bir düğme kullanın. Modal kutusunun dışına tıklayıp Ancak, JavaScript birazcık, ayrıca kalıcı kapatabilirsiniz:
Örnek
// 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";
}
}
Kendin dene "