0

Estoy trabajando en un proyecto y estaría teniendo problemas con los modales. Acá va el ejemplo:

Tengo un botón que abre modal_1 y este mismo muestra unas pestañas en la que una tiene una tabla, dentro de esa tabla hay un anchor/botón (puede ser los dos) que al hacer click abre modal_2 y me muestra un formulario con datos que luego de completarlos, le tengo que dar al botón "guardar" del modal_2 y cerrarse para mostrar la informacion en la tabla del modal_1.

El problema esta en que al abrir modal_2, el modal_1 se me cierra y yo necesito que quede abierto.

Este es mi codigo del modal_2:

            <!-- MODAL VER CONCEPTO PARTICULAR -->

        <div class="modal fade" id="ver-concepto-part" tabindex="-1" aria-labelledby="ver-concepto-part" aria-hidden="true">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Conceptos Extras</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
              <form class="form-sample">
                              <div class="row-md-6">
                                <div class="col-md-12">
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label" style="width: 13em;;">Concepto:</label>
                                    <select id="" name="" style="width:40.9%;height:2.1em;margin:0 12px 0 10px; padding:0;">
                                      <option value="agua">Agua</option>
                                      <option value="luz">Luz</option>
                                    </select>
                                    <div class="form-check col-sm-2">
                                      <label class="form-check-label">
                                        <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Claro </label>
                                    </div>
                                  </div>
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label" style="width: 13em;;">Asignado a Cuenta:</label>
                                    <select id="" name="" style="width:30.9%;height:2.1em;margin:0 12px 0 10px; padding:0;">
                                      <option value="">Alquiler</option>
                                      <option value="">Alquiler2</option>
                                    </select>
                                  </div>
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label" style="width: 13em;;">Monto:</label>
                                    <div style="width:7em;">
                                      <input class="form-control" type="number" name="" id="" placeholder="$0,00">
                                    </div>
                                  </div>
                                  <div class="form-group row">
                                    <label class="col-sm-2 col-form-label" style="width: 13em;;">Porcentaje del Alquiler:</label>
                                    <div style="width:7em;">
                                      <input class="form-control" type="number" name="" id="" placeholder="0,00%">
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div class="col-md-6 grid-margin stretch-card">
                                <div class="card">
                                  <div class="card-body">
                                    <h6 class="card-title">Inquilino:</h6>
                                    <div class="d-flex align-items-start justify-content-start">
                                      <div class="aplica-pun-inqui-c1">
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Sin Efecto </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Sumar al Pago </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Descontar del Pago </label>
                                        </div>
                                      </div>
                                      <div class="aplica-pun-inqui-c2">
                                        <div class="form-check">
                                          <label class="form-check-label" style="color:#5eb3e5;">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Aplica Punitorios </label>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="card" style="margin: 0 5px;">
                                  <div class="card-body">
                                    <h6 class="card-title">Propietarios:</h6>
                                    <div class="d-flex align-items-start justify-content-start">
                                      <div class="aplica-pun-inqui-c1">
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Sin Efecto </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Sumar a lo que cobra </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Descontar de lo que cobra </label>
                                        </div>
                                      </div>
                                      <div class="aplica-pun-inqui-c2">
                                        <div class="form-check">
                                          <label class="form-check-label" style="color:#5eb3e5;">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Aplica Administración </label>
                                        </div>
                                      </div>
                                    </div>
                                    <hr>
                                    <div class="col-xs-12">
                                      <div class="form-check">
                                          <label class="form-check-label" style="color:#5eb3e5;">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Todos </label>
                                        </div>
                                        <div class="form-group row">
                                      <label class="col-sm-2 col-form-label" style="width: 8em;;">Propietario:</label>
                                    <select id="" name="" style="width:50.9%;height:2.1em;margin:0 12px 0 10px; padding:0;">
                                      <option value=""></option>
                                    </select>
                                      </div>
                                      </div>
                                      <div class="form-check">
                                          <label class="form-check-label" style="color:#5eb3e5;">
                                            <input type="checkbox" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Entregar Comprobante </label>
                                        </div>
                                  </div>
                                </div>
                              </div>

                              <hr>

                              <div class="col-md-12 grid-margin stretch-card">
                                <div class="card">
                                  <div class="card-body">
                                    <h6 class="card-title">Período de Aplicación:</h6>
                                      <div class="form-group row">
                                      <label class="col-sm-2 col-form-label" style="width: 9em;;">Fecha Inicio:</label>
                                        <div style="width:11em;">
                                          <input class="form-control" type="date" name="" id="">
                                        </div>
                                        <label class="col-sm-2 col-form-label" style="width: 7em;;">Fecha Fin:</label>
                                        <div style="width:11em;">
                                          <input class="form-control" type="date" name="" id="">
                                        </div>
                                      </div>
                                    <div class="d-flex align-items-start justify-content-start">
                                      <div class="aplica-pun-inqui-c1">
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="radio" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Todos </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="radio" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Meses Pares </label>
                                        </div>
                                        <div class="form-check">
                                          <label class="form-check-label">
                                            <input type="radio" name="grupo-pago1" class="form-check-input" onclick="quitarChecksMenosEste('grupo-pago1', this)"> Meses Impares </label>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="table-responsive tabla-cobranza-inqui mt-4">
                                      <table id="conceptos_extras_inqui" class="table table-bordered">
                                        <thead>
                                          <tr class="tr-cobranza-inqui">
                                            <th class="th-meses"> Ene </th>
                                            <th class="th-meses"> Feb </th>
                                            <th class="th-meses"> Mar </th>
                                            <th class="th-meses"> Abr </th>
                                            <th class="th-meses"> May </th>
                                            <th class="th-meses"> Jun </th>
                                            <th class="th-meses"> Jul </th>
                                            <th class="th-meses"> Ago </th>
                                            <th class="th-meses"> Sep </th>
                                            <th class="th-meses"> Oct </th>
                                            <th class="th-meses"> Nov </th>
                                            <th class="th-meses"> Dic </th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                            <td class="th-meses"> <input type="checkbox" name="" id=""> </td>
                                          </tr>

                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </div>

                            </form>
              </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button class="btn btn-danger">Eliminar</button>
          <button class="btn btn-primary" data-bs-target="#ver-conceptos-extras" data-bs-toggle="modal">Volver Atras</button>
          </form>

        </div>
      </div>
    </div>
  </div>
  <!-- FIN MODAL -->
5
  • Que librerías estas usando? bootstrap?
    – Luis
    Commented el 13 abr. 2023 a las 16:08
  • Si Luis, estoy usando BS.
    – JMF
    Commented el 13 abr. 2023 a las 16:17
  • En donde tienes el segundo modal? no logro poder encontrarlo
    – Luis
    Commented el 13 abr. 2023 a las 16:39
  • Como comenta @Luis, en el código que posteaste no vemos el segundo modal. Ten en cuenta ponerle un id distinto a ese segundo elemento que se "convertirá" a modal.
    – Francisco
    Commented el 13 abr. 2023 a las 17:50
  • Perdon, el modal_1 no lo agregue porque es un modal bastante parecido al modal_2
    – JMF
    Commented el 13 abr. 2023 a las 18:16

2 respuestas 2

1

Básicamente, esta es la estructura que necesitas con Bootstrap 4 para lograr lo que buscas.

En el primer modal creas un botón que abre el segundo modal y al hacer click en el, el segundo modal se superpone al primero.

$(document).on('click', '#btnModal1', function() {
  $('#modal1').modal('show');
});

$(document).on('click', '#btnModal2', function() {
  $('#modal2').modal('show');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" id="btnModal1" class="btn btn-primary">Modal 1</button>

<div id="modal1" class="modal fade" role="dialog" style="overflow-y: scroll;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-tittle">Modal 1</h4>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" id="btnModal2">Modal 2</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar modal 1</button>
      </div>
    </div>
  </div>
</div>

<div id="modal2" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-tittle">Modal 2</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar modal 2</button>
      </div>
    </div>
  </div>
</div>

Con Bootstrap 5 será así:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">
  Modal 2
</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal 2
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1
  • Cabe resaltar que desde la versión 5.1.3 ya no funciona llamar a un modal desde otro modal (por lo menos con el código presente en esta respuesta).
    – padaleiana
    Commented el 19 sept. 2023 a las 17:44
0

Muchas gracias por responder. ¿Qué se usa en lugar de bootstrap para abrir un modal sobre otro modal teniendo en cuenta que en su ultimas versiones esta prohibida esta posibilidad?. ¿será crearlo con javascript y css?

3
  • Hola Julio. Yo uso una imágen transparente de 1x1 pixels extendida, al ancho de pantalla (para que atrape toda acción del mouse) bajo una ventana emergente, que recubre la zona que necesito. Manejando los atributos de profundidad de pila de ventanas visibles, puedo superponer cuantas necesite. Experimenta con la idea.
    – quevedo
    Commented el 20 sept. 2023 a las 1:56
  • Si tienes una nueva pregunta, la puedes formular haciendo clic en el botón Formular una pregunta. Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - Desde revisión
    – Maida
    Commented el 20 sept. 2023 a las 6:50
  • Muchas Gracias por tu respuesta. Brillante la solución que me propones, ya voy a experimentar esa posibilidad. Gracias totales
    – julio paez
    Commented el 28 sept. 2023 a las 12:26

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.