machen Seite scrollen verhindern, wenn die lightbox aktiv ist

Habe ich die folgenden lightbox, beinhaltet ein Formular. Alles funktioniert einwandfrei. Mein problem ist nur wie man die html Seite scrollen verhindern, wenn die lightbox aktiv ist.

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block'">
<img src="img/add.jpg"/></a></p>
<div id="light" class="white_content">

<input name="degree_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['degree_1'];?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73"
   value="<?php echo $user_data_profile_education['grade_1'];?>"/>

<a href = "javascript:void(0)" onclick="
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none'"> 
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>

und das ist mein css:

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 220%;
    background-color: grey;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}


.white_content {
    display: none;
    position: absolute;
    top: 45%;
    left: 30%;
    width: 32%;
    height: 51%;
    padding: 30px;
    padding-left:50px;
    border: 5px solid green;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
siehe stackoverflow.com/questions/9280258/...
Wenn Sie möchten, dass der lightbox-content um stationär sein, auch mit den Blättern von Seiten, können Sie die lightbox-css auf position: fixed;
es funktioniert vielen Dank...

InformationsquelleAutor 33528 | 2013-03-31

  1. 12

    Add overflow: hidden auf Ihren Körper, wenn Sie zeigen die lightbox und overflow: auto, wenn Sie es verstecken.

    können Sie mir zeigen, wie kann ich dies mit meinem code?
    Dokument hinzufügen.Körper.Stil.overflow='hidden' für das onclick-Ereignis der link zeigt, dass die lightbox und zu dokumentieren.Körper.Stil.overflow= "auto", um das onclick-event des link, der es versteckt.
    Super Antwort, einfach und effektiv, +1 gegeben.
    Dies bewirkt, dass die scrollbar verschwinden, während er verborgen ist, erweitert sich die Seite leicht, Umfließen von text, so gibt es eine hässliche visual springen.
    Dies funktioniert nicht auf iOS. Einstellung overflow: hidden auf den Körper nicht verhindern, dass es zu scrollen.

    InformationsquelleAutor Kaloyan

  2. 0

    Verwenden onLoad/onClose-zum ändern der css-div-hält den Inhalt der Seite

    Einstellung .lb_overlay Höhe ist eine nette Geste, fügen Sie die gleichen "Rand" von der Spitze des modal auf der Unterseite, so scrollen, um den Boden nicht nur sitzen rechts am unteren Rand des Fensters

    var modal = $("#modal"),
    wrapper = $("#wrapper")

$("#modalTrigger").click(function(){
    modal.lightbox_me({
        centered: true,
        onLoad : function(){
            wrapper.css({
                "position" : "fixed",
                "width" : "100%"
            })
            $(".lb_overlay").css("height" , parseInt($(window).height()) + parseInt(modal.css("top") ) + "px" )
        },
        onClose : function(){
            wrapper.css("position" , "relative")
        }
    })
})

    InformationsquelleAutor user3152459

  3. 0

    Fügen Sie einfach dieses Skript zu deaktivieren scrollign in lighbox 

    <script>
        lightbox.option({
    disableScrolling:true
    })
</script>

    InformationsquelleAutor Simran Malhotra

Schreibe einen Kommentar