0

Tengo un problema con las ventanas modal de bootstrap. Abro un "modal1" y todo bien, el tema es que al apretar en un boton se abre un nuevo "modal2", hasta ahi todo bien. Pero, cuando cierro el "modal2". Se habilita el scroll de la pantalla principal y la del "modal1" queda "deshabilitada", como que no esta.

Alguna solucion?. Gracias.

Modal1

  <div class="modal fade" id="modalMenuReserva" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="tituloMenuReserva">Nueva Reserva</h5>
    </div>
    <input type="hidden" id="profesionReserva">
    <input type="hidden" id="idPacienteReserva">  
    <input type="hidden" id="estadoReserva">
    <input type="hidden" id="tratamientoReserva">
    <input type="hidden" id="nombreTratamiento">
    <input type="hidden" id="colorEvento">
    <input type="hidden" id="colorTexto">
    <input type="hidden" id="codigoTurnoReserva">
    <input type="hidden" id="horaInicioHide">
    <input type="hidden" id="horaFinHide">
    <input type="hidden" id="opcionReserva" value="reservarTurno">
    <input type="hidden" id="idTurnoReserva">
    <input type="hidden" id="activoTurno" value="1">
    <div class="modal-body" style="overflow-y: scroll;">
      <div class="container">
        <ul class="nav nav-tabs nav-justified" id="ulModalMenuReserva">
          <li class="nav-item">
            <a class="nav-link active" id="LiReservaButon" href="#LiReserva" role="tab" data-toggle="tab">Reserva</a>
          </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade show active" id="LiReserva">
            <div class="form-group">
              <div class="form-row">
                <div class="col-md-5" id="divBuscadorPaciente" style="border-right: 1px solid #000">
                  <div class="form-group" style="margin-top: 10px">
                    <div class="form-row">
                      <div class="col-md-12">
                        <div class="form-group" style="margin-top: 10px;margin-bottom: 2px">
                          <div class="form-row">
                            <div class="col-md-4">
                            </div>
                            <div class="col-md-6">
                              <h5>Datos del Paciente</h5>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>                    
                  <div class="form-group" style="margin-top: 10px">
                    <div class="form-row">
                      <div class="col-md-7">
                        <div class="form-label-group">
                          <label for="buscarPaciente" id="buscarPaciente" class="col-sm-8 control-label">Buscador de Pacientes</label>
                          <div id="selectPaciente"></div>
                        </div>
                      </div>
                      <div class="col-md-5">
                        <div style="margin-top: 26px" class="form-label-group">
                          <button type="button" id="btnModalPaciente" class="btn btn-success btn"><i class="fa fa-user-plus"></i> Nuevo Paciente</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="form-row">
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="nombrePaciente" id="nombrePacienteL" class="col-sm-3 control-label">Nombre</label>
                          <input id="nombrePaciente" name="nombrePaciente" type="text" class="form-control" autofocus disabled>  
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="apellidoPaciente" id="apellidoPacienteL" class="col-sm-3 control-label">Apellidos</label>
                          <input id="apellidoPaciente" name="apellidoPaciente" type="text" class="form-control" disabled>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="form-row">
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="codigoPaciente" id="codigoPacienteL" class="col-sm-6 control-label">Codigo</label>
                          <input id="codigoPaciente" name="codigoPaciente" type="text" class="form-control" disabled>  
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="emailPaciente" id="emailPacienteL" class="col-sm-6 control-label">Email</label>
                          <input id="emailPaciente" name="emailPaciente" type="email" class="form-control" disabled>  
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="form-row">
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="telefonoPaciente" id="telefonoPacienteL" class="col-sm-6 control-label">telefono</label>
                          <input id="telefonoPaciente" name="apellidotelefonoPacientePaciente" type="text" class="form-control" disabled>  
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-label-group">
                          <label for="fechaNacPaciente" id="fechaNacPacienteL" class="col-sm-6 control-label">Nacimiento</label>
                          <input id="fechaNacPaciente" name="fechaNacPaciente" type="text" class="form-control" disabled>  
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="form-row">
                      <div class="col-md-4">
                      </div>                        
                      <div class="col-md-6">
                        <button type="button" id="borrarDatosPacienteReserva" class="btn btn-primary btn btn-dark">Reestablecer Datos</button>
                      </div>
                      <div class="col-md-2">
                      </div>
                    </div>
                  </div>                   
                </div> <!-- col-md-5 -->
              </div><!--Form row -->
            </div> 
            <div class="modal-footer">
              <div id="menuBtnEliminarTurno" class="bottom-left">                  
                <button type="button" id="btnEliminarTurno" class="btn btn-danger">Eliminar Turno</button>
              </div>
              <button type="button" class="btn btn-primary" id="btnReservarTurno">Guardar Cambios</button>
              <button type="button" class="btn btn-secondary" id="btnCancelarTurno">Cerrar</button>
            </div>
          </div><!-- LiReserva -->
        </div> 
      </div> <!-- container 426 -->
    </div>
  </div>
</div>

Al hacer click en btnModalPaciente

$('#btnModalPaciente').on("click",function(){
  limpiarDatosPaciente();
  $("#modalAddPaciente").modal("show"); 
});

Modal2 (se abre)

  <div class="modal fade" id="modalAddPaciente" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="labelModalAddPac modal-title">Agregar Nuevo Paciente</h4>
    </div>
    <div class="modal-body">
      <input type="hidden" id="idPacienteAdd" name="idPacienteAdd" value="0">
      <input type="hidden" id="opcion" name="opcion" value="registrar">
      <input type="hidden" id="idSexoPaciente" name="idSexoPaciente" value="">
      <input type="hidden" id="fecNacPacienteValor" name="fecNacPacienteValor" value="">
      <div class="form-group">
        <div class="form-row">
          <div class="col-md-6">
            <div class="form-label-group">
              <label for="apellidoPacienteAdd" id="apellidoPacienteAddL">Apellidos(*)</label>
              <input id="apellidoPacienteAdd" name="apellidoPacienteAdd" type="text" class="form-control" placeholder=" Ingrese Apellidos" autofocus>  
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-label-group">
              <label for="nombrePacienteAdd" id="nombrePacienteAddL">Nombre(*)</label>
              <input id="nombrePacienteAdd" name="nombrePacienteAdd" type="text" class="form-control" placeholder="Ingrese Nombres">      
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-row">
          <div class="col-md-6">
            <div class="form-label-group">
              <label for="direccionPacienteAdd" id="direccionPacienteAddL" class="col-sm-3">Direccion</label>
              <input id="direccionPacienteAdd" name="direccionPacienteAdd" type="text" class="form-control" placeholder="Ingrese Direccion">  
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-label-group">
              <label for="localidadPacienteAdd" id="localidadPacienteAddL" class="col-sm-3">Localidad</label>
              <input id="localidadPacienteAdd" name="localidadPacienteAdd" type="text" class="form-control" placeholder="Ingrese Localidad">
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-row">
          <div class="col-md-3">
            <div class="form-label-group">
              <label for="dniPacienteAdd" id="dniPacienteAddL" class="col-sm-3 control-label">Documento</label>
              <input id="dniPacienteAdd" name="dniPacienteAdd" type="text" class="form-control" placeholder="Ingrese Doc..">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-label-group">
              <label for="cuitPacienteAdd" id="cuitPacienteAddL" class="col-sm-3 control-label">CUIT</label>
              <input id="cuitPacienteAdd" name="cuitPacienteAdd" type="text" class="form-control" placeholder="Ingrese CUIT">
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-label-group">
              <label class="text-center" for="fecNacPacienteAdd">Fecha Nacimiento</label>
              <div class="input-group date">
                <input id="fecNacPacienteAdd" onkeydown="return false" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
              </div>                
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-row">
          <div class="col-md-4">
            <div class="form-label-group">
              <label for="telefonoPacienteAdd" id="telefonoPacienteAddL" class="col-sm-3 control-label">Telefono</label>
              <input id="telefonoPacienteAdd" name="telefonoPacienteAdd" type="text" class="form-control" placeholder="Ingrese telefono">
            </div>
          </div>
          <div class="col-md-8">
            <div class="form-label-group">
              <label for="emailPacienteAdd" id="emailPacienteAddL" class="col-sm-3 control-label">Email</label>
              <input id="emailPacienteAdd" name="emailPacienteAdd" type="text" class="form-control" placeholder="Ingrese Email">
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="form-row">
          <div class="col-md-4">
            <div class="form-label-group">
              <label for="sexoPacienteAdd" id="sexoPacienteAddL" class="col-sm-3 control-label">Sexo</label>
              <div id="selectSexo"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" id="btnCancelarAddPaciente" data-dismiss="modal">Cancelar</button>
      <button type="button" class="btn btn-primary" id="addPaciente">Guardar Cambios</button>
    </div>
  </div>
</div>

El problema es que al cerrar "modal2", el scroll pasa al background, o sea, a la pantalla principal.. cuando la pantalla que deberia estar activa es la del "modal1"

4
  • Puedes publicar tu código? Ya que asi es más fácil ayudarte.
    – milmal
    el 20 ene. 2021 a las 13:26
  • 2
    Sin código no podemos ayudarte. Edita la pregunta y muestra tu código para poder ver donde tienes el problema el 20 ene. 2021 a las 13:32
  • Como ya te comentan, debes mostrar tu código y explicar mejor el problema y el resultado deseado. De lo contrario es muy difícil darte una respuesta apropiada, por ejemplo, te podría decir que no abras el segundo modal y problema resuelto, y obviamente eso no es lo que quieres como respuesta, pero es lo único que puedo aportar sin ver un ejemplo mínimo verificable en tu pregunta. Saludos el 20 ene. 2021 a las 15:53
  • Ahi esta editado.. Disculpen por no poner antes el codigo,,
    – Matiri90
    el 20 ene. 2021 a las 19:24

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.