Buen dia a todos, quisiera que me apoyaran con esto, tengo un html tengo ajax y css, quiero que al dar click me cuente los click(eso ya lo hace) pero que al momento de dar click se me visualice un div que lo tengo con invisible.. este es mi codigo
AJAX
$(document).ready(function() {
var a = $('#sumclick');
a.on('click', function(e) {
var id_row = 114;
$.ajax({
url: '../../../citas.php',
type: 'post',
data: {id: id_row},
success: function(resp) {
$('#popup').html(resp);
Cargar();
}
})
})
});
function Cargar()
{
$('#popup').load(" #popup"); /*En esta opcion quiero que lo carge*/
}
HTML
<div class="modal-wrapper" id="popup">
<div class="popup-contenedor">
<h2>Citado</h2>
<p>Alvarez, A., Andocilla, J., Medina, E. y Mendez, R. (2018)
Prácticas en el manejo de madera y su incidencia en el sector
artesanal de Ambato. Espacio I+D Innovación más Desarrollo,
7(17) 9-21.</p>
<a class="popup-cerrar" href="#">X</a>
</div><!--Modal para contar citas-->
</div>
CSS
#popup {
display: none;
opacity: 0;
margin-top: -300px;
}
#popup:target {
display: block;
opacity: 1;
background-color: rgba(0,0,0,0.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 999;
transition:all 1s;
}
.popup-contenedor {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
width:50%;
}
a.popup-cerrar {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}