Aviso de férias / alerta popup customizado

Algum código de Pop Up para colocar aviso de férias na pagina"'carrinho" ou “checkout” sem ser aquele nativo da LI de newsletter? Porque aquele nativo fica muito estranho com o campo email. Já pesquisei aqui na comunidade e não achei nada.
Obrigado

Alguém para auxiliar?

Pelo visto, ninguém… rsrsrs quem sabe aparece uma alma abençoada.

exemplo:

esse: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2
ou esse: https://jquerymodal.com/

1 curtida

esse primeiro link, copiei o codigo e coloquei no site e ficou assim " Animated Modal Witch… " o que devo fazer? se puder me ensinar, não craquem em códigos.

olha não era um codigo para copiar, era um codigo de ideia para fazer as devidas customizações.

ah vlw amigo, mas não estou nesse nivel, não… quem sabe um dia eu tenho tempo para estudar mais HTML. Obrigado mesmo assim! Forte abraço

link teste: https://www.w3schools.com/code/tryit.asp?filename=GLDA2KJAJXC8


<style>

/* The Modal (background) */
.modal-aviso {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-aviso-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close-aviso {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-aviso:hover,
.close-aviso:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-aviso-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-aviso-body {padding: 2px 16px;}

.modal-aviso-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
</style>

<!-- The Modal -->
<div id="myModal" class="modal-aviso">

  <!-- Modal content -->
  <div class="modal-aviso-content">
    <div class="modal-aviso-header">
      <span class="close-aviso">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-aviso-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-aviso-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-aviso")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

setTimeout(function(){ 
	document.getElementById("myModal").style.display = "block";
}, 1000);

</script>
5 curtidas

Certo, vou estudar essa semana e ver se consigo. Muito obrigado amigo!

esse código que coloquei vai fazer o que vc precisa.
insira como html, os tem, que customizar cores e trocar a msg

1 curtida

Tô chegando lá, ainda não ficou perfeito, tenho que descobrir como não aparecer o menu do fundo. mas tô indo! Vou pesquisar. Muito obrigado

mudar isso

  z-index: 1; /* Sit on top */

para isso

  z-index: 100; /* Sit on top */
4 curtidas

Perfeito amigo!!! Como te agradecer??? Muito, muito obrigado deu super certo tudo! Deus te abençoe, obrigado por dispersar seu tempo aqui comigo me ajudando! Forte abraço!

2 curtidas

@Leonardo_Vicentini_F- sempre auxiliando…Grato

2 curtidas

Show, ótimo código!
Fiz algumas personalizações, caso ajude alguém:

<style>

/* The Modal (background) */
.modal-aviso {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(255,230,179); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-aviso-content {
  position: relative;
  background-color: #ffbf80;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close-aviso {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-aviso:hover,
.close-aviso:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-aviso-header {
  padding: 2px 16px;
  background-color: #ff8000;
  color: black;
}

.modal-aviso-body {
    padding: 16px 16px;
    font-size: 20px;
    color: black;
}

.modal-aviso-footer {
  padding: 2px 16px;
  background-color: #ff8000;
  color: black;
}
</style>

<!-- The Modal -->
<div id="myModal" class="modal-aviso">

  <!-- Modal content -->
  <div class="modal-aviso-content">
    <div class="modal-aviso-header">
      <span class="close-aviso">&times;</span>
      <h2>Aviso sobre Postagem</h2>
    </div>
    <div class="modal-aviso-body">
      <p>Excepcionalmente <b>NÃO</b> haverá postagem na sexta dia 20 nem na segunda dia 23 de agosto.</p>
      <p>Pedidos aprovados a partir de quinta-feira dia 19 de agosto serão postados na terça-feira dia 24.</p>
      <p>A loja está com funcionamento normal e seguimos atendendo pelo WhatsApp e e-mail!</p>
    </div>
    <div class="modal-aviso-footer">
      <h3>Pedimos desculpas e agradecemos a compreensão!</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-aviso")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

setTimeout(function(){ 
	document.getElementById("myModal").style.display = "block";
}, 1000);

</script>
7 curtidas

thais vc pode me ajudar? eu nao estou conseguindo identificar o campo para alterar a informação férias e mudei o código da cor mas nao alterou… vc lembra os campos que vc mexeu?

se quiser te passo o código, eu só não sei como postar aqui, pq ele é muito grande

O código é esse

Código férias – HTML RODAPÉ -CARRINHO

/* The Modal (background) */ .modal-aviso { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-aviso-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* The Close Button */ .close-aviso { color: white; float: right; font-size: 28px; font-weight: bold; } .close-aviso:hover, .close-aviso:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-aviso-header { padding: 2px 16px; background-color: #ff0000; color: white; } .modal-aviso-body {padding: 2px 16px;} .modal-aviso-footer { padding: 2px 16px; background-color: #ff0000; color: white; }

×

AVISO IMPORTANTE

16/10 a 19/10

Compras realizadas nesse período serão enviadas a partir do dia 20/10

Gratos!

Valeu Thais,
Deu certo consegui fazer
Obrigada!

1 curtida

Se a gente, que muitas vezes é leigo em código (eu sou) consegue fazer isso com boa vontade, porque a LI não faz como recurso da plataforma? Seria tão mais prático e simples para ela… Difícil. Se surgir com certeza será por um parceiro que cobrará.

2 curtidas