popup.liquid

<style>
.pop-up_canvas  {
  background: #e65f5f;
  z-index: 9998;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;
  -webkit-transition: opacity .5s ease,visibility .5s ease;
  transition: opacity .5s ease,visibility .5s ease;
}

.pop-up {
  position: fixed;
  width: 100%;
  height: 300px;
  background-size: cover;
  z-index: 99999;
  top: 50%;
  margin: -150px 0 0 0;
  display: table;
}

.pop-up .step-2 {
	display: none;
}

.pop-up_inside {
  padding: 30px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.pop-up h2 {
  color: #fff;
  font-weight: 600;
}

.pop-up h3 {
  color: #fff;
  font-weight: 600;
  font-size: 30px;
}

.pop-up h4 {
  color: #fff;
}

.pop-up_inside span {
  color: #fff;
  background: #db0e0e;
  line-height: 47px;
  text-transform: uppercase;
  font-size: 25px;
  padding: 0px 5px;
  display: inline;
  white-space: pre;
}

.pop-up_inside span b {
	font-weight: 600;
}

.pop-up_canvas .cerrar {
  position: absolute;
  top: 20px;
  font-size: 2em;
  right: 20px;
  color: #fff;
  cursor: pointer;
}

.pop-up .boton-obvio,
.pop-up .codigo .code{
  width: 200px;
  background: #fff;
  height: 60px;
  line-height: 60px;
  color: #e65f5f;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  margin: 10px auto;
  font-size: 20px;
}

.pop-up .boton-obvio,
.pop-up .obvio-queno,
.pop-up .ir-a{
  cursor: pointer;
}

.pop-up .codigo,
.pop-up .chao{
	display: none;
}

.pop-up .chao i{
	font-size: 5em;
}

</style>

<div class="pop-up_canvas">
  <span class="cerrar"><i class="linear-icon icon-0811-cross"></i></span>
<div class="pop-up">
  <div class="pop-up_inside">
    <h2 class="step-1">🎅🏻<br>Te regalamos 5% extra de descuento para lo que quieras</h2>
    <h2 class="step-2">🎅🏻<br>¡Listo! Ingresa tu código al momento de comprar. Descuento acumulable a otras promociones.</h2>
    <h3 class="step-1">¿Lo quieres?</h3>
    <div class="boton-obvio step-1">Obvio que sí</div>
    <div class="codigo step-2"><h4>Tu código es</h4><div class="code">FELIZNAVIDAD2018</div></div>
    <div class="obvio-queno step-1"><u>No, tengo mucha plata</u></div>
    <div class="chao">
      <i>💸</i><br>
      <u class="ir-a">[Sigamos comprando]</u>
    </div>
    <div class="ir-a step-2"><u>[Ir a comprar]</u></div>
  </div>
</div>
</div>
<script>
  $( ".pop-up_canvas").delay( 4000 ).fadeIn( 400 );
  $( ".pop-up_canvas .cerrar, .pop-up .ir-a" ).click(function() {
    $( ".pop-up_canvas" ).fadeOut( 300 );
	});
  
  $( ".pop-up .boton-obvio" ).click(function() {
    $( ".pop-up .step-1" ).hide();
    $( ".pop-up .step-2" ).show();
	});
  
  $( ".pop-up .obvio-queno" ).click(function() {
    $( ".pop-up .step-1" ).hide();
    $( ".pop-up .chao" ).show();
	});
  
  $(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       $( '.pop-up_canvas' ).fadeOut( 300 );
    }
});
</script>