¿Cómo evito que mi scrollbar funcione al salir ventana emergente?

publicado por: Anonymous

Lo que me gustaria hacer es bloquear la pantalla de mi sitio web, pero no toda solo la parte de atras, esto que quiere decir que cuando se abra mi modal la pantalla que esta atras de mi modal abierto no se pueda mover con el scrollbar.

introducir la descripción de la imagen aquí

solución

Bueno, básicamente este es el concepto:

Cuando el lightbox es activado => bloquea el body/html scroll.
Cuando es desactivado o se activa el botón de cierre => agregue "scroll de cuerpo" de nuevo.

Ahora hay dos maneras de hacer esto.

✦ (nueva edición) Creando una clase con el estilo deseado para bloquear lo scroll de la página y alternar esta clase cuando necesario (que es la mejor práctica):

.block-scroll {overflow:hidden;}

✦ O añadiendo el estilo deseado directamente al elemento con .css()

$('html,body').css('overflow', 'hidden');

1. Creando una clase de manejo (nueva edición):

_x000D_

_x000D_

$(document).ready(function(){
    var $popContainer = $('#popup-container');
    var $body = $('html,body');

    $('#fire-popup').on('click', function() {
        $popContainer.fadeIn();
        $body.addClass('block-scroll'); // clase de manejo
    });
    $('#popup-overlay').on('click', function() {
        $popContainer.fadeOut();
        $body.removeClass('block-scroll'); // clase de manejo
    });
});

_x000D_

body {height:1000px;}
.block-scroll {overflow:hidden;} /* clase de manejo */
#popup-container {display:none;}
#popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px 20px;
    z-index:1;
}
#popup-overlay{
    background-color: rgba(0, 0, 0, 0.6);
}
.full-layer{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<button id="fire-popup">Popup Trigger</button>
<div id="popup-container" class="full-layer">
    <div id="popup-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis non massa vitae mollis. Suspendisse at pellentesque lacus. Nunc ante quam, congue sed egestas quis, porta sed metus.
    </div>
    <div id="popup-overlay" class="full-layer"></div>
</div>

_x000D_

_x000D_

_x000D_

2. Añadiendo .css() para ocultar scroll directamente al elemento:

_x000D_

_x000D_

$(document).ready(function(){
    var $popContainer = $('#popup-container');
    var $body = $('html,body');

    $('#fire-popup').on('click', function() {
        $popContainer.fadeIn();
        $body.css('overflow', 'hidden');
    });
    $('#popup-overlay').on('click', function() {
        $popContainer.fadeOut();
        $body.css('overflow', 'auto');
    });
});

_x000D_

body {height:1000px;}
#popup-container {display:none;}
#popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px 20px;
    z-index:1;
}
#popup-overlay{
    background-color: rgba(0, 0, 0, 0.6);
}
.full-layer{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<button id="fire-popup">Popup Trigger</button>
<div id="popup-container" class="full-layer">
    <div id="popup-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis non massa vitae mollis. Suspendisse at pellentesque lacus. Nunc ante quam, congue sed egestas quis, porta sed metus.
    </div>
    <div id="popup-overlay" class="full-layer"></div>
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.