Modal Pop Up

Pop Up podem ser muito úteis em um blog, quando utilizados corretamente, por serem práticos e ágeis. Além disso, são capazes de serem utilizados para unir diversas coisas dentro de uma única página, fazendo com que o número de links diminua e deixa a navegação mais fácil e rápida.

Neste modelo, ao clicar no botão de fechamento e ao apertar a tecla Escem seu teclado, o modal irá sumir. Continue lendo para aprender a como criá-lo!

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: Esta é a parte JavaScript do código, responsável por abrir e fechar o modal.

2 Ainda nesta parte do código, adicione o seguinte trecho. Esta parte é responsável por conter o conteúdo do seu modal, insira o conteúdo que será mostrado ao abrí-lo.

3 Hora de personalizar! Ainda dentro da caixa de códigos do seu blog, procure por ]]></b:skin> e cole a seguinte parte de código acima:
.modalBox { color: black; /*--- Cor da fonte ---*/ background-color: #fff; /*--- Cor do fundo ---*/ display: block; visibility: hidden; opacity: 0; position: absolute; left: 50%; top: 0%; margin-top: -100vh; margin-left: -300px; width: 600px; max-height: 50vh; padding: 50px 25px; border-radius: 3px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.2); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .modalBox.ativo { visibility: visible; opacity: 1; margin-top: 50px; } .close-modal { position: absolute; cursor: pointer; top: 15px; right: 15px; opacity: 1; } .close-modal svg { width: 1.75em; height: 1.75em; } @media only screen and (max-width: 39.9375em) { .modalBox { position: fixed; top: 0; left: 0; margin-top: 0px !important; margin-left: 0px !important; width: 100%; height: 100%; max-height: none; -webkit-overflow-scrolling: touch; border-radius: 0; padding: 50px 25px !important; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } }
4 Salve.

Créditos: Nainoa Shizuru, com adaptações.

Um comentário, comente também!

  1. Super legal o efeito, muito dinâmico e ajuda na experiencia do usuário.

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...