Efeito popup com caixa de texto

Olá meus queridos, tudo certinho? Sumida? Nãooo nem um pouco, e zero pessoas chocadas com o meu sumiço hahaha Mas então, eu sumi mesmo pois já havia comentando a alguns posts atrás que eu viria a ficar sem postar devido a volta da faculdade. As aulas estão sugando todas as minhas forças vitais, eu pareço uma zumbi definitivamente pois não estou dormindo mais direito, esse é o preço para quem quer estudar e tentar se dar bem na vida.. Ainda bem que esta saga está quase acabando e em dezembro eu me formo se Deus quiser e ele há de querer hehe. Agora sobre ficar um tempo fora todos já estão acostumados e nem se importam mais rsrs, menos mal '-'

Sobre esta postagem hoje, não irei me estender pois em meio ao caos ainda consegui tirar um tempo para trazer algo e confesso que estava trabalhando nesse efeito popup a uma cara. Eu usei um código base do site code pen que era horrível e só usei praticamente a hospedagem do jquery mesmo pois o resto eu que construí tudo, desde a imagem do botão de clicar até o fundo e o botão de fechar. Então mores, por favorzinho creditem a mim tá? Só peço isso, eu fiquei orgulhosa de como ele ficou e é um xodózinho meu agora.. Aproveitem <3

LIVE PREVIEW ❤

Vá até o seu modelo e cliquem e editar html, dentro procure por: ]]></b:skin> e acima dele cole o seguinte código:

.popupback {

position: fixed;

top: 0px;

bottom: 0;

left: 0;

right: 0;

background: rgba(0, 0, 0, 0.7);

transition: opacity 500ms;

visibility: hidden;

opacity: 0;

}

.popupback:target {

visibility: visible;

opacity: 1;

}

.popup {

font-family: calibri;

font-size: 15px;

color:#7b716e;

text-shadow: 1px 1px 1px #fff;

text-align:center;

margin: 70px auto;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 20px;

padding-right: 50px;

background: #fff;

border-radius: 5px;

width: 30%;

position: relative;

transition: all 2s ease-in-out;

}

.popup .close {

position: absolute;

background:#fbc8bd;

border: solid 1px #fdbaac;

border-radius: 100%;

width:25px;

height:25px;

line-height:21px;

top: 5px;

right: 8px;

transition: all 200ms;

text-align:center;

font-size: 25px;

font-weight: bold;

text-decoration: none;

color: #fff;

}

.popup .content {

max-height: 30%;

overflow: auto;

}      

.button{

margin-top: 335px;

margin-left:-25px;

width:200px;

height:100px;

background: url("https://i.imgur.com/EehnbEG.png");

display:inline-block;

}

Agora vá até o seu modelo e clique em editar html, dentro procure por </head> e abaixo dele cole o código que irá fazer seu popup funcionar:

<script type="text/javascript">

$('.open-popup-link').magnificPopup({

  type: 'inline',

  midClick: true,

  mainClass: 'mfp-fade'

});

</script>  

E para o pomposo aparecer no tema, dentro de um gadget cole o código abaixo: 

<div style="position: absolute; margin-left:120px; margin-top: -230px; z-index:999999999999999999999999999;">

<a class="button" href="#popup1"></a>

<div id="popup1" class="popupback">

<div class="popup">

<a class="close" href="#">&times;</a>

<div class="content">

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</div>

</div>

</div>

</div>