W3.CSS Modal
A modal é uma janela de caixa de diálogo / pop-up que é exibida no topo da página atual:
Como criar um Modal
Exemplo
<!-- 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> Tente você mesmo " The Class "w3-modal"
A modal pode ser qualquer recipiente HTML (como um <div>) com class = "w3-modal".
The Class "-modal-content w3"
Todo o conteúdo modal deve ser colocado em um recipiente HTML com class = "-content w3-modal".
conteúdo Modal pode ser qualquer elemento HTML (cabeçalhos, parágrafos, imagens, etc.)
Abra um Modal
Use qualquer elemento HTML para abrir o modal. Isso é muitas vezes um botão ou link.
Adicione o atributo onclick e aponte para o id do modal (ID01 no nosso exemplo), usando o método document.getElementById () e especificar uma identificação única que corresponde ao botão de "gatilho" (ID01).
Fechando um Modal
Para fechar um modal, adicione a classe w3-closebtn a um elemento juntamente com um atributo onclick que aponta para o id do modal (ID01). Você também pode fechá-lo clicando fora do modal (veja exemplo abaixo).
 | & vezes; (X) é uma entidade HTML que é o ícone de preferência para botões de fecho, em vez de a letra "X". |
|---|
Modal Cabeçalho e Rodapé
Dentro do <div> com class = "-modal-content w3", classes de uso w3-contentores para criar seções diferentes no modal:
Exemplo
<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> Tente você mesmo " Modal como um cartão
Para exibir o modal como um cartão, adicionar a classe w3-cartão- * ao recipiente w3-modal-conteúdo:
Modais animados
Use qualquer um dos w3-animado-zoom | top | bottom | direito | aulas esquerda para deslizar na modal a partir de uma direção específica:
Exemplo
<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">
Tente você mesmo " Você também pode se desvanece na cor de fundo do modal (w3-modal):
modal imagem
Clique na imagem para exibi-la em tamanho real:
Exemplo
<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>
Tente você mesmo " Modal Galeria de Imagens
Clique na imagem para exibi-la em tamanho real:
Exemplo
<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>
Tente você mesmo " Modal Login Form
Este exemplo cria um modal para login:
Tab modal
Este exemplo cria um modal com o conteúdo com abas:
Feche o Modal
Nos exemplos acima, que utilizam um botão para fechar o modal. No entanto, com um pouco de JavaScript, você também pode fechar o modal ao clicar fora da caixa de modal:
Exemplo
// 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";
}
}
Tente você mesmo "