0

Hola comunidad espero me puedan ayudar tengo este problema con modales de bootstrap 4 de antemano les agradezco su ayuda.

Tengo una modal principal donde cargo los datos de mi grid en controles input para actualizarlos en la base de datos utilizando ajax. Por lo que al momento de dar clic en el botón de actualizar necesito mostrar otra modal con la leyenda de que los datos han sido actualizados correctamente.

El problema es que la segunda popup no se muestra pero si le coloco una alerta esta si se muestra.

Este es mi código.

// Para poder actualizar estoy utilizando ajax


$("#btnActualizar").click(function() {                 
                     
                            $.ajax({
                                type: "POST",
                                datatype: "json",
                                url: "Nombre_Formulario/Nmbre_Metodo",
                                contentType: "application/json; charset=utf-8",
                                data: //Aqui paso mis parametros esto funciona correctamente
                                cache: false,
                                success: function(data) {
                                   
                                    $("#popup_Mensaje").modal('show'); // La modal no se visualiza en pantalla.									
                                    // alert("Dato insertado correctamente"); // Esta alerta si se muestra
                                    
                                },
                                error: function(error) {
                                    alert(error.responseText);
                                    console.log(error.responseText);
                                    jsonValue = jQuery.parseJSON(Error.responseText);
                                    alert(error.respose.Text);
                                    alert("Error");
                                }
                            });

                });
<!-- Esta es la primera modal que se muestra -->

<!-- The Modal -->
  <div id="popup_Actualizar" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content"> 
        
        <!-- Modal body -->
        <div class="modal-body">
          Aqui van los inputs con la informacion no lo coloco para no hacer muy extenso el codigo pero esta parte funciona correctamente
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="btnCancelar" class="btn btn-danger btn-block" data-dismiss="modal">Cancelar
          </button>
          <button type="btnActualizar" class="btn btn-primary btn-block">Actualizar
          </button>
        </div>
        
      </div>
    </div>
  </div>
  

<!-- Esta es la segunda modal que intento mostrar -->

<!-- The Modal -->
  <div id="popup_Mensaje" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content"> 
        
        <!-- Modal body -->
        <div class="modal-body">
          Su registro se ha actualizado correctamente.
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="btnAceptar" class="btn btn-danger btn-block" data-dismiss="modal">Aceptar
          </button>
        </div>
        
      </div>
    </div>
  </div>
  
  

2 respuestas 2

1

Tienes errores en tu código html. Los botones los estas llamando en el atributo 'type', y debería de ser el atributo 'id' y dejando el 'type' como 'button'.

<div class="modal-footer">
<button id="btnCancelar" type="button" class="btn btn-danger btn-block" data-dismiss="modal">
    Cancelar
</button>
<button id="btnActualizar" type="button" class="btn btn-primary btn-block">
    Actualizar
</button>

y

<div class="modal-footer">
<button id="btnAceptar" type="button" class="btn btn-danger btn-block" data-dismiss="modal">
    Aceptar
</button>

Con eso debe de funcionar.

Ahora, como sugerencia, pudiera ser que antes de mostrar el segundo modal ocultaras el primero. Lo puedes hacer con esto:

$("#popup_Actualizar").modal('hide'); // Ocultar el primer model
$("#popup_Mensaje").modal('show'); // La modal no se visualiza en pantalla.
0

intenta poner el estilo del nuevo popup de reseña "z-index: 10;"

style="z-index:10"

Puede ser que se muestre pero por debajo de otros div

2
  • Hola @Henry Martinez Q. ya coloque un z.index de 999 pero no logro visualizar esta modal enfrente de la primera y como la primera es grande no veo si la segunda se visualiza otro punto es que el fondo gris de la modal permanece igual no se vuelve mas oscuro.
    – SHINOBI
    Commented el 26 jul. 2019 a las 15:07
  • Y te has fijado que z-index tiene el otro popup, los estilos que manejan c/u?, por otro lado, no estará el popup de detalle en display:block?
    – hdmq
    Commented el 26 jul. 2019 a las 15:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.