2

Tengo una columna de tipo botón en mi grid al dar clic este me muestra mi primer modal(La modal es mas grande que la pantalla por lo que se activa el scrollbar derecho) que cuando doy clic en cancelar se cierra bien sin que se mueva el body. También me he dado cuenta que al abrir un modal desaparece el scroll del body pero para mi primer modal no hay problema.

El problema surge al dar clic en el botón Actualizar de la primera modal la cual abre otra modal mostrando solo un mensaje pero al cerrar esta segunda modal veo que mi body comienza a moverse como si quisiera aparecer el scrollbar.

¿Existe una solución para que mi body no se mueva al cerrar mi segunda modal sin que tenga de aparecer y desaparecer el scroll del body?

Aquí mi código esto es solo un ejemplo.

$(document).on({
        'show.bs.modal': function() {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        },
        'hidden.bs.modal': function() {
            if ($('.modal:visible').length > 0) {
                // restore the modal-open class to the body element, so that scrolling works
                // properly after de-stacking a modal.
                setTimeout(function() {
                    $(document.body).addClass('modal-open');
                }, 0);
            }
        }
        }, '.modal');
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal1">
              click me            </button>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
     <p>
     Este es informacion inferior
     </p>         
        
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">FIRST MODAL</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p><p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal2">
              Open 2nd Modal            </button>
              </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">SECOND MODAL</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

3
  • Hola Shinobi, en tu código no veo que se mueva el scroll del Body mientras están abiertos los dos modales, veo que cuando abres los modales se mueve el scroll pero de esos modales, no los del body. ¿Podrías por favor explicar mejor qué es lo que deseas? Commented el 2 ago. 2019 a las 13:01
  • Hola @JheymanMejia lamentablemente no se por que ahi no sucede pero al abrir la primera modal el body esconde su scroll al cerrar la modal el body aparece el scroll hasta este punto es aceptable y para mi es funcional, el verdadero problema es que después de abrir el primer modal y si los datos son actualizados correctamente se abre una segunda modal que solo tiene una leyenda pero al cerrarla el body reacciona como si fuera la única modal por lo que trata de aparecer su scroll entonces es ahí cuando el body comienza a moverse y es lo que quiero evitar espero me haya explicado.
    – SHINOBI
    Commented el 2 ago. 2019 a las 16:55
  • Sí, te explicas claramente, pero no puedo reproducir tu error con el código, si ya tienes tu proyecto alojado en línea podrías compartirlo para echarle un vistazo. Commented el 2 ago. 2019 a las 17:40

2 respuestas 2

2

Podrías hacer que el scroll apareciera en las modales, cuando abres una modal. Entonces la barra de scroll de la pagina desaparecerá y solo habrá scroll en la modal. Para hacer esto tendrias que modicar la clase de la modal:

class="modal-dialog modal-dialog-scrollable"
1
0

Tenia el mismo problema y lo resolví con esto usando JQuery agregando al body la clase modal-open especificamente cuando el Modal2 se cerraba

$(document).ready(function() { 
    $('#myModal2').on('hidden.bs.modal', function (e) { 
       $("body").addClass("modal-open") 
    }) 
})

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.