Disabilita lo scorrimento mentre popup attivo

Question

Ho creato un popup jQuery seguendo un tutorial online (http://uposonghar.com/popup.html).

A causa delle mie scarse conoscenze su jQuery, non sono in grado di farlo funzionare secondo le mie esigenze.

Il mio problema:

1. voglio disabilitare scroll della pagina web, mentre è attivo popup.
2. Colore dissolvenza sfondo del popup mentre attivo non funziona sulla pagina Web completa.

CSS:

body { 
    background: #999; 
} 
#ac-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,.6); 
    z-index: 1001; 
} 
#popup{ 
    width: 555px; 
    height: 375px; 
    background: #FFFFFF; 
    border: 5px solid #000; 
    border-radius: 25px; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    box-shadow: #64686e 0px 0px 3px 3px; 
    -moz-box-shadow: #64686e 0px 0px 3px 3px; 
    -webkit-box-shadow: #64686e 0px 0px 3px 3px; 
    position: relative; 
    top: 150px; left: 375px; 
} 

JavaScript:

<script type="text/javascript"> 
function PopUp(){ 
    document.getElementById('ac-wrapper').style.display="none"; 
} 
</script> 

HTML:

<div id="ac-wrapper"> 
    <div id="popup"> 
    <center> 
    <p>Popup Content Here</p> 
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" /> 
    </center> 
    </div> 
</div> 

<p>Page Content Here</p> 

Answer 1

Una risposta semplice, che si potrebbe usare e non si richiede di fermare l'evento di scorrimento potrebbe essere quella di impostare la posizione del vostro #ac-wrapper fisso.

ad es.

#ac-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,.6); 
    z-index: 1001; 
} 

questo non mancherà di tenere il contenitore del popup sempre visibile (allineato in alto - a sinistra), ma sarebbe comunque consentire lo scorrimento.

Ma scorrere la pagina con un popup aperto è MALE !!! (Quasi sempre comunque)

ragione che non vorresti per consentire lo scorrimento anche se è perché se il popup non è a schermo intero o è semi trasparente, gli utenti vedranno il contenuto di scorrimento dietro il popup. Inoltre, quando chiudono il popup, ora si troveranno in una posizione diversa sulla pagina.

Una soluzione è che, quando si associa un evento di click in javascript per visualizzare questo popup, per aggiungere anche una classe per il corpo con essenzialmente queste regole:

.my-body-noscroll-class { 
    overflow: hidden; 
} 

Poi, quando si chiude il popup innescando qualche azione o con un clic, è sufficiente rimuovere nuovamente la classe, consentendo lo scorrimento dopo che il popup è stato chiuso.

Se l'utente scorre mentre il popup è aperto, il documento non scorrerà.Quando l'utente chiude il popup, lo scorrimento diventa nuovamente disponibile e l'utente può continuare da dove si è interrotto :)

Answer 2

Per disattivare barra di scorrimento:

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

In questo modo nascondere la barra di scorrimento

Background-fade-cosa:

ho creato il mio popup-dialogo-widget che ha uno sfondo troppo. Ho usato il seguente CSS:

div.modal{ 
    position: fixed; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 9998; 
    background-color: #000; 
    display: none; 
    filter: alpha(opacity=25); /* internet explorer */ 
    -khtml-opacity: 0.25; /* khtml, old safari */ 
    -moz-opacity: 0.25; /* mozilla, netscape */ 
    opacity: 0.25; /* fx, safari, opera */ 
} 

Answer 3

Ho avuto un problema simile; volendo disabilitare lo scrolling verticale mentre era visualizzato un div "popup".

La modifica della proprietà di overflow di body non funziona, ma comporta anche problemi con la larghezza del documento.

Ho scelto jquery per risolvere questo problema utilizzando e utilizzato un segnaposto per la barra di scorrimento. Ciò è stato fatto senza legarsi alla manifestazione scroll, ergo questo non cambia la posizione della barra di scorrimento o causare sfarfallio :)

HTML:

<div id="scrollPlaceHolder"></div> 

CSS:

body,html 
{ 
    height:100%; /*otherwise won't work*/ 
} 
#scrollPlaceHolder 
{ 
    height:100%; 
    width:0px; 
    float:right; 
    display: inline; 
    top:0; 
    right: 0; 
    position: fixed; 
    background-color: #eee; 
    z-index: 100; 
} 

Jquery:

function DisableScrollbar() 
{ 
    // exit if page can't scroll 
    if($(document).height() == $('body').height()) return; 

    var old_width = $(document).width(); 
    var new_width = old_width; 

    // ID's \ class to change 
    var items_to_change = "#Banner, #Footer, #Content"; 

    $('body').css('overflow-y','hidden'); 

    // get new width 
    new_width = $(document).width() 

    // update width of items to their old one(one with the scrollbar visible) 
    $(items_to_change).width(old_width); 

    // make the placeholder the same width the scrollbar was 
    $("#ScrollbarPlaceholder").show().width(new_width-old_width); 

    // and float the items to the other side. 
    $(items_to_change).css("float", "left"); 

} 

function EnableScrollbar() 
{ 
    // exit if page can't scroll 
    if ($(document).height() == $('body').height()) return; 

    // remove the placeholder, then bring back the scrollbar 
    $("#ScrollbarPlaceholder").fadeOut(function(){   
     $('body').css('overflow-y','auto'); 
    }); 
} 

Spero che questo aiuti.

Answer 4

Ho avuto lo stesso problema e ho trovato un modo per sbarazzarmene, basta interrompere la propagazione sul touchmove del tuo elemento che si apre. Per me, era il menu a schermo intero che appariva sullo schermo e non si poteva scorrere, ora è possibile.

$(document).on("touchmove","#menu-left-toggle",function(e){ 
    e.stopPropagation(); 
}); 

Answer 5

Utilizzare il codice riportato di seguito per disabilitare e abilitare la barra di scorrimento.

Scroll = (
    function(){ 
      var x,y; 
     function hndlr(){ 
      window.scrollTo(x,y); 
      //return; 
      } 
      return { 

       disable : function(x1,y1){ 
        x = x1; 
        y = y1; 
        if(window.addEventListener){ 
         window.addEventListener("scroll",hndlr); 
        } 
        else{ 
         window.attachEvent("onscroll", hndlr); 
        }  

       }, 
       enable: function(){ 
         if(window.removeEventListener){ 
         window.removeEventListener("scroll",hndlr); 
         } 
         else{ 
         window.detachEvent("onscroll", hndlr); 
         } 
       } 

      } 
    })(); 
//for disabled scroll bar. 
Scroll.disable(0,document.body.scrollTop); 
//for enabled scroll bar. 
Scroll.enable();