Janela Pop-Up com Cookie

Janela Pop-Up com Cookie

Pop-up é uma janela que abre no navegador da internet quando se acessa uma página na web.

A Janela Pop-Up apresenta informações de destaque do site ou, na maioria dos casos, publicidades, anúncios ou um formulário de newsletter.

Vamos Adicionar o Html:

<div class="modal-cookie-fundo" id="modal-cookie-fundo">
<div class="modal-cookie-janela">

<div class="fecha-modal-cookie"> <span title="Fechar">X</span></div>
       
      <div class="listaConteudo">
        
        <a href="https://www.loopnerd.com.br/" target="_blank" title="Loop Nerd">
            <img src="uploads/popup.png">
        </a>    
        <!--<div class="texto">digite seu texto aqui... </div>-->

      </div><!--Imagem--> 

</div>
</div>

Vamos Adicionar o Css:

.modal-cookie-fundo  { 

	width:100%; 
	height:100%; 
	background-color:rgba(0,0,0,0.8); 
	z-index:999; 
	display:none; 
	position:fixed; 
	top:0; 
	left:0;
}

.modal-cookie-fundo .modal-cookie-janela  { 

	width:90%; 
	height:auto; 
	position:absolute; 
	top:25%; 
	left:10%; 
	margin-top:0; 
	margin-left:-5%; 
	padding:0; 
	background:#fff;
}

.modal-cookie-janela .listaConteudo  { 

	width:100%; 
	overflow:hidden; 
	float:left;  
}

/* Se for Usar imagem use <img src="images/banner.png" */
.modal-cookie-janela .listaConteudo img   { 

	width:100%; 
	height:auto; 
	position:absolute; 
	top:0; 
	left:0;  

}

/* Se for Usar Texto use a Class="texto" */
.modal-cookie-janela .listaConteudo .texto {

   width:100%;
   float:left;  
   padding:0.5em;
   background-color:blue; 
}

.modal-cookie-fundo .fecha-modal-cookie { 

	position:relative; 
	z-index:99; 
	display:block; 
	width:35px; 
	height:35px; 
	line-height:35px; 
	font-weight:bold; 
	font-size:0.9em; 
	background-color:#01bbe6; 
	color:#fff; 
	text-align:center; 
	cursor:pointer; 
	float:right; 
	right:-15px; 
	top:-15px; 
	border-radius:50px; 

}

/*Responsivo*/
@media (min-width:60em){

    .modal-cookie-fundo .modal-cookie-janela  {

        width:60%; 
        top:22%; 
        left:40%; 
        margin-top:0; 
        margin-left:-20%;

    }

}

Finalizamos com o Script do modal com Cookie:

<script src="js/jquery.min.js"></script>
<script src="js/modal.jquery.cookie.js"></script>
<script>

//MODAL
$(document).ready(function(){

   $(".fecha-modal-cookie").click(function() {
       $(".modal-cookie-fundo").fadeOut(400);
   });
   
});
//MODAL

//Cookie
$(document).ready(function() {   

    if($.cookie("view") == null) {
     $('.modal-cookie-fundo').hide().delay(2000).fadeIn(400); 
     $.cookie("view", "2");
    }

});
//Cookie

</script>

Veja o Resultado!

Baixar Código Veja Funcionando