Aceite dos termos (sem refresh) - alerta popup - checkout

Layout
6

Termo de aceito com modal na propria tela, sem sair da tela.

<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";
  }
}

$('<div class="termo"><span class="desc-termo">LI E ACEITO</span><a class="link-termo" alt="Termos de compra" target="_blank">termos e condições</a><input class="aceita-termo" type="checkbox"/></div><button type="button" id="finalizarCompraFake" class="botao principal grande disabled" data-loading-text="<i class=\'icon-refresh icon-animate\'></i> Finalizando..." autocomplete="off" style="display: inline-block;"><i class="icon-ok"></i>Finalizar compra</button>').prependTo('body.pagina-carrinho.carrinho-checkout .acao-editar');

$('.link-termo').on("click", function() {
	document.getElementById("myModal").style.display = "block";
})

$(".aceita-termo").change(function() {
    if(this.checked) {
        $("#finalizarCompraFake").hide();
        $("#finalizarCompra").show();
    }
    else {
        $("#finalizarCompra").hide();
        $("#finalizarCompraFake").show();
    }
 });

$( document ).ajaxComplete(function( event, request, settings ) {
   if($('.aceita-termo').is(':checked')){
      $("#finalizarCompraFake").hide();
      $("#finalizarCompra").show();
   }else{
       $("#finalizarCompra").hide();
      $("#finalizarCompraFake").show();
  }
});

</script>
2 curtidas