NEWSLETTER POUP-UP CAPTURADOR DE E-MAILS

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

NEWSLETTER POUP-UP CAPTURADOR DE E-MAILS

Mensagem por Admin em Dom Maio 10, 2015 3:33 pm

Local Publicação: Cabeçalho.
Página publicação: Página inicial - Home
Tipo: Cascade Style Sheet (CSS).
Conteúdo:

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {  position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
 #boxes .window {  position:absolute;left:0;top:0;width:440px;height:200px;display:none;z-index:9999;padding:20px;}
 #boxes #dialog {  width:630px; height:50%;padding:0;}
 #dialog .d-header {  position:relative;top:60%;width:350px; height:90px;}
   #dialog .d-header input {color: #fff;}
 #dialog .d-blank {  float:left;background:url(login-blank.png) no-repeat 0 0 transparent; width:267px; height:53px;}
 #dialog .d-login {  width:270px; height:40px;position:relative;top:100px;left:335px;text-align:center;}
 .close{display:block; text-align:right; background:url(http://cdn.awsli.com.br/75/75839/arquivos/btn-close.png); width:36px; height:37px; display:block; position:absolute; top:-15px; right:-15px;}



-----------------------------------------
Local Publicação: Rodapé.
Página publicação: Página inicial - Home
Tipo: HTML.

<div id="boxes">  
<div id="dialog" class="window" align="center">
<br />
<div class="d-header">
<div class="row-fluid">
   <a href="#" class="close"></a>
<div class="span">
 <div class="componente newsletter borda-principal">
   <div class="interno">
     <span class="titulo cor-secundaria">
       <i class="icon-envelope-alt"></i>Receba Nossas Novidades
     </span>
     <div class="interno-conteudo">
       <p class="texto-newsletter newsletter-cadastro">Cadastre-se e receba um cupom de 10% de desconto na hora de finalizar sua compra.</p>
       <div class="newsletter-cadastro input-conteiner">
          <span class="add-on"><i class="icon-envelope"></i></span><input type="text" class="span2" id="inputIcon" name="email" placeholder="Digite seu email" />
         <button class="botao botao-input fundo-principal icon-chevron-right newsletter-assinar" data-action="http://www.apboutique.lojaintegrada.com.br/newsletter/assinar/"></button>
       </div>
         <div class="newsletter-confirmacao hide">
         <i class="icon-ok icon-3x"></i></br>
         <span>MUITO OBRIGADO(A),INSIRA O SEGUINTE CÓDIGO NA HORA DE FINALIZAR SUA COMPRA E GANHE 10% DE DESCONTO.</br><span class="titulo cor-secundaria">NEWSAP10</span>
         </span>
         
       </div>
     
     </div>
   
   </div>
 </div>
 </div>
</div>

   
 </div></div></div></div>
<div id="mask"></div></div>


-------------------------------------------
Local Publicação: Cabeçalho.
Página publicação: Página inicial - Home
Tipo: HTML. <<É HTML MESMO, NÃO JAVA SCRIPT>>

<script type="text/javascript">
function setCookie(name, value, days) {
       if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           var expires = "; expires=" + date.toGMTString();
       } else var expires = "";
       document.cookie = name + "=" + value + expires + "; path=/";
   }

   function getCookie(name) {
       var nameEQ = name + "=";
       var ca = document.cookie.split(';');
       for (var i = 0; i < ca.length; i++) {
           var c = ca[i];
           while (c.charAt(0) == ' ') c = c.substring(1, c.length);
           if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
       }
       return null;
   }

   $(document).ready(function () {

       var box = getCookie('janela_modal');

       if (box == null) {
           launchWindow('#dialog');
           $('.window .close').click(function (e) {
               e.preventDefault();
               $('#mask').hide();
               $('.window').hide();
           });
           setCookie('janela_modal', 'visitou', 1);
       }
   });

   function launchWindow(id) {
       var maskHeight = $(document).height();
       var maskWidth = $(window).width();
       $('#mask').css({
           'width': maskWidth,
           'height': maskHeight
       });
       $('#mask').fadeIn(0);
       $('#mask').fadeTo("fast", 0.Cool;
       var winH = $(window).height();
       var winW = $(window).width();
       $(id).css('top', winH / 2 - $(id).height());
       $(id).css('left', winW / 2 - $(id).width() / 2);
       $(id).fadeIn(0);
   }
</script>

-------------------------





Lembrando que estes códigos acima são para alteração e design do Poup-up capturador de e-mails, logo será preciso outro css para alterar o design da newsletter que faz parte do layout da página, então para alterala e deixa-la com a cara e design do poup-up use o seguinte código:

Local Publicação : Editar CSS

/*  Newsletter box */


.newsletter{background: #fff; border: 4px solid #000000; border-radius: 7px;}
.newsletter .titulo{border-bottom: 3px solid #000000; font-size: 16px; color: #000000; padding-bottom: 10px;}
.newsletter .titulo i:before{content: ''; width: 35px; height: 28px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja23.png) no-repeat -90px -60px;}
.banner .newsletter .titulo{padding: 10px 0; margin: 0 15px;}
.newsletter .texto-newsletter{font-size: 13px;}
.newsletter .input-conteiner{background: #000000; padding: 5px; border-radius: 25px;}
.newsletter input{background: none; border: 0; box-shadow: none; font-size: 12px;}
.newsletter .botao{background: none; border: 0;padding: 0;top: 3px;right: 5px;}
.newsletter .botao:before{content: ''; width: 30px; height: 30px; background: url(//cdn.awsli.com.br/128/128258/arquivos/icones_loja22.png) no-repeat -60px -90px;}

-------------------------------
"ESTES CÓDIGOS SÃO DE AUTORIA DE VINICIUS DIEGO, MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS"
PORTANTO QUALQUER DÚVIDA EM RELAÇÃO AOS CÓDIGOS PROCUREM A ELE.

POST FEITO POR: RAFAEL PERES - MEMBRO DO GRUPO LOJA INTEGRADA - CÓDIGO ABERTO FEITO PARA LOJISTAS
avatar
Admin
Admin

Mensagens : 2
Data de inscrição : 01/05/2015

Ver perfil do usuário http://codigoaberto.forumeiros.com

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum