Modais podem ser muito úteis em um blog, pois são mais práticos e ágeis do que criar páginas inteiras para mostrar poucas informações. Mas para isso, devem ser utilizados corretamente. Por evitarem a criação de páginas, é possível juntar diversas informações dentro de uma única página e separá-las em modais. Dessa forma, não é necessário trocar de página quando quiser mostrar alguma informação sem que ela esteja aparecendo na página o tempo todo.
Continue lendo para aprender a como colocá-lo em seu blog.
1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por </body> > Cole o seguinte código acima:
2 Ainda dentro do Editor de Código, procure por ]]></b:skin> > Cole o seguinte código acima e salve:
3 Agora, se você quiser que o modal seja acessado de qualquer lugar do seu blog, cole o seguinte trecho de código acima de </body>. Se você quiser que ele apareça dentro de alguma postagem ou em uma página específica, você cola o seguinte trecho de código dentro da parte HTML da postagem/página.
4 Faça as alterações necessárias.
5 Salve.
6 Agora, é só adicionar a chamada para abrir o modal onde você quiser:
button, tendo o atributo onclick fazendo a chamada do openModal deve funcionar.
7 Por fim, faça as alterações necessárias e salve.
id (primeira linha, por padrão está modal-popup, você pode colocar modal-popup-2, modal-creditos, etc) e passar este novo id no botão fechar dentro do modal (onde está closeModal('modal-popup'), só mudar o que está dentro de aspas simples '). Por fim, passar este novo id também para o botão que abre o modal (onde está openModal('modal-popup')), da mesma forma que foi alterado o botão de fechar.
Continue lendo para aprender a como colocá-lo em seu blog.
<script>
function openModal(id) {
document.getElementById(id).style.display = 'block';
}
function closeModal(id) {
document.getElementById(id).style.display = 'none';
}
</script>
.modal {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.modal-body {
width: 400px;
background: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 5%), 0px 1px 1px 0px rgb(0 0 0 / 5%), 0px 1px 3px 0px rgb(0 0 0 / 5%);
}
.modal-title {
padding: 10px;
}
.modal-content {
text-align: justify;
padding: 10px;
}
.modal-footer {
text-align: right;
padding: 10px;
}
.modal-footer button {
color: white;
background: #C0A080;
padding: 5px 10px;
font-family: monospace;
font-weight: 700;
text-transform: uppercase;
border: none;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
<div class="modal" id="modal-popup" style="display: none;">
<div class="modal-body">
<h4 class="modal-title">Título do modal</h4>
<div class="modal-content">
Texto do modal, o conteúdo que você quer colocar
</div>
<div class="modal-footer">
<button onclick="closeModal('modal-popup')">Fechar</button>
</div>
</div>
</div>
<button class="button-modal" onclick="openModal('modal-popup')">Abrir</button>
A chamada do modal não precisa necessariamente estar em um
Super legal o efeito, muito dinâmico e ajuda na experiencia do usuário.
ResponderExcluirOieee xeroso, como vai?
ResponderExcluirEu amo popups, amo tanto que fiz um também e sou muito fã em usar no blog, no último lay eu tinha e eu achava muito fofinho, as vezes quando o tema já está cheio de coisas é muito por um para poder controlar a quantidade de itens e não deixar o tema tão carregado..
O seu é muito fofo, amei >.<
Beijocas =3
Eu também gosto bastante deles! São muito bons pra utilizar com conteúdos pequenos, ai passam a ideia de ser uma notificação, apenas entregando algum detalhe ou mensagens mais simples. Como você disse, ajudam demais a não deixar o tema carregado com muitas informações!
ExcluirKissus~
aaaa popups nunca consegui criar sozinha pq mexia com javascript e eu acho um bicho de 40 cabeças. mas eu ja ate sei como usar este, é bom pra não deixar o site cheio de coisa na cara aaaa
ResponderExcluirJavascript foi um dos meus maiores medos no começo de desenvolvimento web, entender a lógica por trás deles era muito difícil porque dependendo de quem desenvolveu o código, muitas coisas eram gambiarra, ai pra entender era muito complicado, e a linguagem em si não ajuda muito também xD. Mas depois que pega o jeito é só sucesso （*＾-＾*）
ExcluirLeu minha mente! Eu tava louca atrás dessa função de um jeito que me agradasse e você postou. Achei até que tinha deixado um comentário no dia, mas acho que me empolguei muito e esqueci. Obrigada, vai ser uma mão na roda pra mim que sou louca nas páginas.
ResponderExcluirE mais uma vez, leio o pensamento dos meus leitores pra saber o que postar HSUAHSUASHA
ExcluirFico feliz que tenha ajudado, espero que ajude seu blog :3
See ya~