jQuery simplemodal deshabilitar desplazamiento

Question

Tengo más de 2000 píxeles de contenido desplazable en una página.

Si el usuario hace clic en div aparece un contenido desplazable en una ventana simplemodal. Ahora mi cliente quiere que la página original no sea desplazable mientras la ventana modal está activa. (Por supuesto, el modal debe ser aún desplazable.)

¿Es posible?

Editar: He intentado con sus sugerencias. Básicamente funciona, pero el problema es un poco más complicado:

$(".foReadMoreLink a").click(function(){ 
    if ($('#modalBox').length == 0) 
    $('body').append('<div style="display:none" id="modalBox"></div>') 
    $('body').css({'overflow':'hidden'}); 
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ 
     $('#modalBox').html(data).modal({overlayClose:'true'}); 
    }) 
    return false; 
}); 

utilizo retorno falsa en los enlaces para que los robots y los usuarios sin JavaScript (sí, eso es 2%) puede abrir los artículos. Con el código anterior funciona como se esperaba, pero después de cerrar el modal que tiene que tener la barra de desplazamiento hacia atrás, pero este código no funcionará:

$(".foReadMoreLink a").click(function(){ 
    if ($('#modalBox').length == 0) 
    $('body').append('<div style="display:none" id="modalBox"></div>') 
    $('body').css({'overflow':'hidden'}); 
    $.post('jquery/loadarticle.php',{id:$(this).attr('id')},function(data){ 
     $('#modalBox').html(data).modal({onClose:function(){$('body').css({'overflow':'auto'})},overlayClose:'true'}); 
    }) 
    return false; 
}); 

Answer 1

Uso

overflow:hidden 

aplicarlo a la página cuando se abre el cuadro de diálogo modal y lo elimina cuando se destruye el cuadro de diálogo. Esto ocultará tu barra de desplazamiento.

Answer 2

En la secuencia de comandos para abrir el modal:

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

Y en una estrecha:

$("html,body").css("overflow","auto"); 

(HTML y el cuerpo son necesarios como las barras de desplazamiento están asociadas a diferentes partes del navegador en función de que está utilizando)

Answer 3

Al activar y desactivar las barras de desplazamiento, el contenido cambiará y la superposición ya no cubrirá toda la ventana. He aquí cómo solucionarlo.

var oldBodyMarginRight = $("body").css("margin-right"); 
$.modal(iframe, { 
    onShow: function() { 
     // Turn off scroll bars to prevent the scroll wheel from affecting the main page. Make sure turning off the scrollbars doesn't shift the position of the content. 
     // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5. 
     // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5. 
     var body = $("body"); 
     var html = $("html"); 
     var oldBodyOuterWidth = body.outerWidth(true); 
     var oldScrollTop = html.scrollTop(); 
     var newBodyOuterWidth; 
     $("html").css("overflow-y", "hidden"); 
     newBodyOuterWidth = $("body").outerWidth(true); 
     body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px"); 
     html.scrollTop(oldScrollTop); // necessary for Firefox 
     $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px") 
    }, 
    onClose: function() { 
     var html = $("html"); 
     var oldScrollTop = html.scrollTop(); // necessary for Firefox. 
     html.css("overflow-y", "").scrollTop(oldScrollTop); 
     $("body").css("margin-right", oldBodyMarginRight); 
     $.modal.close(); 
    } 
}); 

Answer 4

He encontrado overflow:hidden no tan bueno, ya que oculta el contenido detrás de la capa semi-transparente si la página se desplaza hasta la mitad.

Se me ocurrió la siguiente, bastante elaborada solución. Deshabilita el desplazamiento en todas las formas detectables posibles que encontré. Y pone la posición en espiral directamente en la posición anterior si la página aún se desplazó de alguna manera.

var popupOpened = false; 

function openPopup() 
{ 
    popupOpened = true; 

    //catch middle mouse click scrolling 
    $(document).bind('mousedown',disableMiddleMouseButtonScrolling); 

    //catch other kinds of scrolling 
    $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll); 

    //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone) 
    //IE8 needs this to be 'window'! 
    $(window).bind('scroll',disableNormalScroll); 

    $("#layover").css({"opacity" : "0.7"}).fadeIn(); 
    $("#popup").fadeIn(300,function() 
    { 
     //use document here for crossbrowser scrolltop! 
     oldScrollTop = $(document).scrollTop(); 
    }); 
} 

function closePopup() 
{ 
    popupOpened = false; 
    $("#layover").fadeOut(); 
    $("#popup").fadeOut(300,function(){ 
     $(document).unbind('mousedown',disableMiddleMouseButtonScrolling); 
     $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll); 
     $(window).unbind('scroll',disableNormalScroll); 
    }); 
} 

function disableMiddleMouseButtonScrolling(e) 
{ 
    if(e.which == 2) 
    { 
     e.preventDefault(); 
    } 
    return false; 
} 

function disableNormalScroll(e) 
{ 
    e.preventDefault(); 
    $('html, body').scrollTop(oldScrollTop); 
    return false; 
} 

Answer 5

Esta opción funciona como un encanto:

document.documentElement.style.overflow = 'hidden'; 

Answer 6

En mi caso en la etiqueta <a> parámetro href = "#". Así solución sea:

href="javascript:void(0);"