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">×</span></button>
<h4 class="modal-title">FIRST MODAL</h4>
</div>
<div class="modal-body">
<p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</p><p>One fine body…</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">×</span></button>
<h4 class="modal-title">SECOND MODAL</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->