1
I’ve set up a page where the customer needs to type in their Cpf to proceed. Includes error messages with sweetalert2 only that when displaying them it is not possible to close. The Sweet-Alert box is not clickable and when I try to click anything, it clicks on the object behind it.
follows my code https://pastebin.com/RL696SQE
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ponto de Cadastramento</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://painel.aivisual.com.br/assets/css/paper-dashboard23cd.css?v=1.2.2" rel="stylesheet"/>
<link href="https://painel.aivisual.com.br/assets/css/main.css" rel="stylesheet">
<style CSS>
html, body {
height: 100%;
}
body{
background:#7da6af;
}
.swal2-container {
z-index: 10000;
}
</style>
</head>
<body>
<div class='container h-100'>
<div class="row h-100 justify-content-md-center">
<div class="col-md-6 my-auto card">
<div class='card-content'>
<div class='row justify-content-md-center'>
<div class='col-md-6'><img src='https://painel.aivisual.com.br/img/logo.svg' class='img-fluid'></div>
</div>
<div class='row justify-content-md-center'>
<div class='col-md-12'>
<center> <br><h5>Seja bem vindo!</h5><p>Para iniciar o cadastro, digite o seu CPF ou RA no campo abaixo</p></center>
</div>
</div>
<div class='row justify-content-md-center'>
<div class='col-md-12'>
<input class="form-control form-control-lg numerocad" type="text" placeholder="CPF / RA" id="registro">
</div>
</div>
<div class='row justify-content-md-center'>
<div class='col-md-12'> <br>
<button type="button" class="form-control form-control-lg btn btn-primary btn-lg btnnext active">Prosseguir</button>
</div>
</div>
<div class='row justify-content-md-center'>
<div class='col-md-12'> <br>
<center><b>Powered by: <a href='https://aiknow.ai' target='aiknow' style='color:#0062cc'>Aiknow</a></b></center>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://painel.aivisual.com.br/assets/js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://painel.aivisual.com.br/assets/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://painel.aivisual.com.br/assets/js/jquery.mask.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@latest"></script>
<script>
function valCpf(cpf){
cpf = cpf.replace(/[^0-9]/g, '').toString();
if( cpf.length == 11 )
{
var v = [];
//Calcula o primeiro dígito de verificação.
v[0] = 1 * cpf[0] + 2 * cpf[1] + 3 * cpf[2];
v[0] += 4 * cpf[3] + 5 * cpf[4] + 6 * cpf[5];
v[0] += 7 * cpf[6] + 8 * cpf[7] + 9 * cpf[8];
v[0] = v[0] % 11;
v[0] = v[0] % 10;
//Calcula o segundo dígito de verificação.
v[1] = 1 * cpf[1] + 2 * cpf[2] + 3 * cpf[3];
v[1] += 4 * cpf[4] + 5 * cpf[5] + 6 * cpf[6];
v[1] += 7 * cpf[7] + 8 * cpf[8] + 9 * v[0];
v[1] = v[1] % 11;
v[1] = v[1] % 10;
//Retorna Verdadeiro se os dígitos de verificação são os esperados.
if ( (v[0] != cpf[9]) || (v[1] != cpf[10]) )
{
return false;
}
}
else
{
return false;
}
return true;
}
$(".btnnext").click(function(){
if($("#registro").val()==""){
Swal.fire({
title: 'Alerta!',
text: 'Para prosseguir você deve digitar seu CPF ou RA.',
type: 'error',
confirmButtonText: 'Entendi !',
heightAuto: false,
})
} else {
if($("#registro").val().length==14){
if(!valCpf($("#registro").val())){
Swal.fire({
title: 'Alerta!',
text: 'Por favor digite um cpf válido!',
type: 'error',
confirmButtonText: 'Ok',
heightAuto: false
})
} else {
$.post( "https://painel.aivisual.com.br/cadastro", { numeroRegistro: $("#registro").val() }).done(function( data ) {
if(data=="ok"){
window.location.href = "https://painel.aivisual.com.br/cadastro";
} else {
Swal.fire({
title: 'Alerta!',
text: data,
type: 'error',
confirmButtonText: 'Ok',
heightAuto: false
})
}
});
}
} else {
$.post( "https://painel.aivisual.com.br/cadastro", { numeroRegistro: $("#registro").val() }).done(function( data ) {
if(data=="ok"){
window.location.href = "https://painel.aivisual.com.br/cadastro";
} else {
Swal.fire({
title: 'Alerta!',
text: data,
type: 'error',
confirmButtonText: 'Ok',
heightAuto: false
})
}
});
}
}
});
$(document).keypress(function(e) {
if(e.which == 13) {
$(".btnnext").click();
}
});
</script>
<script>
$(document).ready(function(){
$('.numerocad').mask('0#', {onKeyPress: function(cep, e, field, options){
var masks = ['0#', '000.000.000-00'];
mask = (cep.length>9) ? masks[1] : masks[0];
$('.numerocad').mask(mask, options);
}});
});
setInterval(function(){ $.post( "https://painel.aivisual.com.br/".rand(0,9999) ); }, 30000);
</script>
<script type="text/javascript" src="https://painel.aivisual.com.br/assets/js/jquery.idle.js"></script>
<script>
$(document).idle({
onIdle: function(){
window.location.href = "https://painel.aivisual.com.br/cadastro/cancel-process";
},
idle: 60000
})
</script>
</html>
Face I found a solution, I edited the answer completely, tests there and me speaks qq thing
– hugocsl