Pop-up termos de aceitação

Layout
1

Boa tarde, prezados.

Possuo uma loja de produtos químicos que está em desenvolvimento.

Hoje criei uma página de Termo de Aceitação que só aparece na página de checkout antes de finalizar a compra…

Sendo que a ideia é: Quando o cliente clicar em no botão “COMPRAR” lá na página do produto se abra um pop-up com a descrição do termo. Dai após ele ler e dar o aceite, consiga prosseguir para página do checkout e finalizar a compra.

Como realizo este procedimento?

2

seria algo ± assim

4

Bom dia Leonardo, obrigado pela atenção!

Infelizmente não consegui fazer dar certo com o código que enviou.

Não sei se coloquei o código no lugar certo.

Eu gostaria que o termo surgisse ao clicar no botão “COMPRAR” assim como coloquei na imagem abaixo.

imagem
imagem1236×624 342 KB

Atualmente estou utilizando o seguinte código e o resultado está sendo como no print abaixo, porém não assim que eu gostaria.

<!-- 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>TESTE</h2>
</div>
<div class="modal-aviso-body">
<p>TEXTO</p>
<p>TEXTO</p>
</div>
<div class="modal-aviso-footer">
<h3>TESTE</h3>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('<div class="termo"><span class="desc-termo"><b>Li e aceito o</b></span><a class="link-termo" href="https://www.lojacloroquimica.com.br/pagina/termo-de-responsabilidade-de-compra-de-produtos-quimicos-nao-presencial.html" alt="Termos de compra" target="_blank">Termo de Responsábilidade de Produtos Químicos</a><input class="aceita-termo" type="checkbox"/></div>').prependTo('body.pagina-carrinho.carrinho-checkout .acao-editar');
$("#finalizarCompra").click(function() { // objeto com id alvo que recebe o click
if($('.aceita-termo').is(':checked')){
}else{
alert('Por favor aceite os termos de uso para continuar');
location.reload(); // ação, atualização da pagina
return false;
}
});
});
</script>

imagem 2
imagem 21362×574 55.9 KB

Eu gostaria que ficasse como na primeira imagem.

Você acha que é possivel? Como posso realizar o procedimento?

5

entendi… esse é somente para o checkout mesmo.;…