W3.CSS Modal
O modală este o / fereastră pop-up caseta de dialog care este afișată în partea de sus a paginii curente:
Cum Pentru a crea un Modal
Exemplu
<!-- 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> Încearcă - l singur » "w3-modal" Clasa
Un modal poate fi orice recipient HTML (like a <div>) cu class = "w3-modal".
"w3-modal-content" Clasa
Întregul conținut modal trebuie să fie plasate într - un container HTML cu class = "-W3-modal conținut".
Conținutul modală poate fi orice element HTML (headings, paragraphs, images, etc.)
Deschide un Modal
Utilizați orice element HTML pentru a deschide modal. Acest lucru este adesea un buton sau un link.
Se adaugă onclick atributul și punctul de la ID - ul de modal ( id01 in our example) , folosind document. getElementById() document. getElementById() metoda și specificați un ID unic care se potrivește cu "trigger" butonul ( id01 ) .
Închiderea unei Modal
Pentru a închide un modal, adăugați clasa W3-closebtn la un element împreună cu un atribut onclick care indică id - modal ( id01 ) . Puteți închide și făcând clic în afara modal (see example below) a se (see example below) de (see example below) .
& ori; (×) este o entitate HTML care este pictograma preferată pentru butoane de închidere, mai degrabă decât litera "x" .
Modal Antet și subsol
În interiorul <div> cu class = "-modal-W3 conținut", clasele de utilizare W3-container pentru a crea secțiuni diferite în modal:
Exemplu
<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> Încearcă - l singur » Modal ca un card
Pentru a afișa modal ca un card, adăugați * clasa W3-carte de la containerul-W3-modal conținut:
modals animate
Utilizați oricare dintre W3-insufletit-zoom | sus | de jos | dreapta | clase lăsate să alunece în modal de la o anumită direcție:
Exemplu
<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">
Încearcă - l singur » Puteți , de asemenea , se estompeze în culoarea de fundal a modal (w3-modal) :
Modal Imagine
Click pe imagine pentru ao afișa în mărime completă:
getElementById ( 'img01') .style.display = 'block'“style = "width: 30%; cursor: pointer"> Exemplu
<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>
Încearcă - l singur » Modal Galeria de imagini
Click pe imagine pentru ao afișa în mărime completă:
onClick (aceasta) "class =" w3-planare-opacitate "> 
onClick (aceasta) "class =" w3-planare-opacitate "> 
onClick (aceasta) "class =" w3-planare-opacitate "> Exemplu
<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>
Încearcă - l singur » Modal Login Form
Acest exemplu creează un modal pentru autentificare:
Modal Tab
Acest exemplu creează un modal cu conținut de tab-uri:
Închideți Modal
În exemplele de mai sus, vom folosi un buton pentru a închide modal. Cu toate acestea, cu un pic de JavaScript, puteți închide, de asemenea, modal atunci când faceți clic în afara casetei modale:
Exemplu
// 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";
}
}
Încearcă - l singur »