Display a div when clicking with ajax

0

Good day to all, I would like you to support me with this, I have a html I have ajax and css, I want to click on the clicks (that already does) but at the time of clicking I am visualized a div that I have it with invisible ... this is my code
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;
            }
    
asked by DanielDaniel 13.08.2018 в 17:11
source

2 answers

2

Try this option:

function Cargar(){
   $('#popup').show();
}
    
answered by 13.08.2018 в 17:25
1

Try this code in your Load () function.

function Cargar(){
   $('#popup').load(" #popup").css('display', 'block');
}
    
answered by 13.08.2018 в 17:16