post
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:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/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.