post #4160
Janela Modal (Popup) com HTML, CSS e JS simplificado
Publicado em: 15/01/2024 / Atualizado em: 15/01/2024
Se você precisa adicionar um modal em sua pagina online, este código pode lhe ajudar. É um código bem simples que vou mostrar logo abaixo como adicionar, e também, vou mostrar como personalizar.
Primeiramente precisamos adicionar em nosso site, o código padrão, que é composto por HTML e JS, que não vai mudar, e um pouco de CSS para estilizar.
Segue código abaixo:
<!-- CODIGO PADRÃO -->
<div id="overlay" onclick="closeModal()">
<div id="modal" onclick="event.stopPropagation();">
<span class="modal-close" onclick="closeModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
<div id="modal-content"></div>
</div>
</div>
<style>
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
#modal {
display: none;
background: #fff;
padding: 32px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
width: 850px;
z-index: 99;
}
.modal-close {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #555;
}
#modal-content h4 {
margin-top: 0;
font-size: 32px;
margin-bottom: 24px;
}
#modal-content p {
font-size: 18px;
line-height: 1.4em;
}
.modal-close {
background: #03738c;
padding: 8px;
border-radius: 8px;
color: #fff;
display: flex;
}
.modal-close:hover {
background: #2899b3;
transform: scale(1.2);
transition: all linear 0.2s;
}
</style>
<script>
function openModal(itemId, event) {
event.preventDefault();
var modalContent = document.getElementById("modal-content");
var itemContent = document.getElementById(itemId).innerHTML;
modalContent.innerHTML = itemContent;
document.getElementById("overlay").style.display = "flex";
document.getElementById("modal").style.display = "block";
}
function closeModal() {
document.getElementById("overlay").style.display = "none";
document.getElementById("modal").style.display = "none";
}
</script>
<!-- CODIGO PADRÃO -->O código acima pode ser adicionado apenas na pagina que deseja abrir o modal ou pode ser adicionado no rodapé do site, para ser carregado em todas as paginas, assim, sempre que precisar adicionar um modal customizado, ele já vai ser carregado.
O código acima funciona basicamente para criar nossa estrutura padrão, pois o conteúdo vamos criar logo a seguir.
No exemplo abaixo, preciso criar um botão (que vai ser clicado para exibir o modal), e o conteúdo do modal (que será carregado via JS).
Segue abaixo um exemplo:
<a href="#" onclick="openModal('item1', event)">Abrir janela 1</a>
<div id="item1" class="item-content" style="display: none;">
<h4>Titulo da janela 1</h4>
<p>Texto da janela 1.</p>
</div>Como todo o conteúdo é carregado via javascript, posso criar quantos modais eu quiser, apenas criando um botão e a div de conteúdo, exemplo:
<a href="#" onclick="openModal('item2', event)">Abrir janela 2</a>
<div id="item2" class="item-content" style="display: none;">
<h4>Titulo da janela 2</h4>
<p>Texto da janela 2.</p>
</div>
<a href="#" onclick="openModal('item3', event)">Abrir janela 3</a>
<div id="item3" class="item-content" style="display: none;">
<h4>Titulo da janela 3</h4>
<p>Texto da janela 3.</p>
</div>Apenas preciso trocar o identificador único no botão em onclick="openModal('item3', event)" e no ID da div (id="item3"). Pois assim, estou associando o botão ao conteúdo.
Exemplo funcional completo:
Abaixo, tenho um exemplo de uma listagem que funciona como “perguntas frequentes” que usa esse modal, porem com alguns estilos a mais. Veja abaixo:
<!-- CONTEUDO -->
<ul class="lista-perguntas">
<li><a href="#" onclick="openModal('item1', event)"><span class="texto">Primeira duvida?</span> <span class="icone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg></span> </a></li>
<li><a href="#" onclick="openModal('item2', event)"><span class="texto">Segunda duvida?</span> <span class="icone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg></span> </a></li>
</ul>
<div id="item1" class="item-content" style="display: none;">
<h4>Primeira duvida?</h4>
<p>Primeiro texto do modal.</p>
</div>
<div id="item2" class="item-content" style="display: none;">
<h4>Segunda duvida?</h4>
<p>Segundo texto do modal.</p>
</div>
<!-- CONTEUDO -->
<!-- ESTILO PERSONALIZADO -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
}
.lista-perguntas li {
list-style: none;
}
.lista-perguntas a {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 18px 24px;
background: #03738c;
font-size: 24px;
border-radius: 12px;
align-items: center;
text-decoration: none;
color: #fff;
transition: all linear 0.2s;
}
.lista-perguntas a:hover {
transform: scale(1.02);
transition: all linear 0.2s;
background: #2899b3;
}
ul.lista-perguntas {
margin: 0;
padding: 0;
display: flex;
gap: 24px;
flex-direction: column;
}
.lista-perguntas .icone {
background: #03738c;
padding: 10px;
border-radius: 8px;
display: flex;
}
</style>
<!-- ESTILO PERSONALIZADO -->
<!-- CODIGO PADRÃO -->
<div id="overlay" onclick="closeModal()">
<div id="modal" onclick="event.stopPropagation();">
<span class="modal-close" onclick="closeModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
<div id="modal-content"></div>
</div>
</div>
<style>
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
#modal {
display: none;
background: #fff;
padding: 32px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
width: 850px;
z-index: 99;
}
.modal-close {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #555;
}
#modal-content h4 {
margin-top: 0;
font-size: 32px;
margin-bottom: 24px;
}
#modal-content p {
font-size: 18px;
line-height: 1.4em;
}
.modal-close {
background: #03738c;
padding: 8px;
border-radius: 8px;
color: #fff;
display: flex;
}
.modal-close:hover {
background: #2899b3;
transform: scale(1.2);
transition: all linear 0.2s;
}
</style>
<script>
function openModal(itemId, event) {
event.preventDefault();
var modalContent = document.getElementById("modal-content");
var itemContent = document.getElementById(itemId).innerHTML;
modalContent.innerHTML = itemContent;
document.getElementById("overlay").style.display = "flex";
document.getElementById("modal").style.display = "block";
}
function closeModal() {
document.getElementById("overlay").style.display = "none";
document.getElementById("modal").style.display = "none";
}
</script>
<!-- CODIGO PADRÃO -->
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4160
ID de Referência: 4160
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.