Janela Modal

Janela Modal

Neste tutorial vamos fazer uma Janela Modal de Privacidade com Html css e jQuery.

Uma Janela Modal abre no navegador da internet quando se acessa uma página na web.

A Janela apresenta informações de destaque do site ou, na maioria dos casos, publicidades, anúncios, Texto informativo ou um formulário de inscrição de newsletter.

Vamos Adicionar o Html:

<!--Janela Modal-->
<div class="janela-modal">
   
    <div class="listaConteudo">

        <div class="left">
            
            <p>
               Usamos cookies para melhorar sua experiência de navegação, analisar o tráfego do site e servir anúncios personalizados. 
               É por isso que precisamos do seu consentimento para que possa continuar navegando em nosso site. 
               Para mais informações, convidamos você a consultar nossa Política de Cookies. 
            </p>

        </div>

        <div class="right">
            <div class="ok fecha-modal">Concordo</div>
        </div>
        
    </div><!--Lista Conteudo--> 

</div>
<!--Janela Modal-->

Vamos Adicionar o Css:

.janela-modal  { 

	width:96%; 
	height:auto; 
	position:fixed; 
	bottom:2%; 
	left:2%; 
	background:#ffffff; 
	box-shadow: -1px 1px 3px rgba(0,0,0,0.2); 
	border-radius:3px; 
	display:none; 
}

.janela-modal .listaConteudo { 

	width:100%; 
	overflow:hidden; 
	float:left; 
	padding:5px; 
}

.janela-modal .listaConteudo img { 

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

}

.janela-modal .listaConteudo .left { 

	width:100%; 
	float:left; 
	margin-bottom:0.5em; 
}

.janela-modal .listaConteudo .left p { 

	font-size:0.85em; 
	color:#7d7d7d; 
	line-height:20px; 

}

.janela-modal .listaConteudo .right { 

	width:100%; 
	float:left; 

}

.janela-modal .listaConteudo .right .ok { 

	background-color:#077eaf; 
	color:#ffffff; 
	width:120px; 
	height:30px; 
	line-height:30px; 
	border-radius:3px; 
	text-align:center; 
	cursor:pointer; 
	float:none; 
	margin:auto; 
	display:block; 
	position:initial; 

}


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

.janela-modal .listaConteudo        { padding:10px; }
.janela-modal .listaConteudo .left { width:84%; float:left; margin-bottom:0; }
.janela-modal .listaConteudo .right { width:16%; float:right; }
.janela-modal .listaConteudo .right .ok { margin-top:0.3em; margin-right:0.3em; float:right; }

}

Finalizamos com Script do Modal com o Cookie:

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

  $(document).ready(function(){

     $(".fecha-modal").click(function() {
         $(".janela-modal").fadeOut(500);
     });

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

   
  });

</script>

Veja o Resultado!

Baixar Código Veja Funcionando