deaktivieren scrollen Sie auf Körper, wenn der modal-Ansicht geöffnet ist

Bin ich die Erstellung dieser website und wenn Sie klicken Sie auf den link in der äußersten rechten Ende der zweiten Zeile der überschrift, modal-Fenster zeigt sich mit youtube-videos
embedded.

Wenn ich Blättern Sie durch die modal -, KÖRPER-wird auch scrollen und ich möchte das beenden. Wie könnte ich das tun?

Hilfe wird sehr geschätzt!
Vielen Dank für Ihre Zeit.

Passwort-geschützte Verbindung.
Sie können hinzufügen dieser css - $("body").css("overflow-y", "hidden")
Hi, danke für die schnelle Antwort. Mein Freund machte diese javascript für mich, so bin ich nicht ganz sicher, wo, um es in meiner js-Datei. Könnten Sie bitte führe mich durch?
wenn Sie auf den link klicken, fügen Sie diese jquery on click Funktion wie $("#yourElemrntIdName").click(function(){$("body").css("overflow-y", "hidden");});
es nicht funktioniert...

InformationsquelleAutor Hirohito Yamada | 2015-04-27

  1. 9

    In der CSS fügen Sie die folgende Regel:

    body.modal-open {
    overflow: hidden;
    }

    Außerdem verwenden einige jQuery, so dass, wenn modal geöffnet ist, fügen Sie .modal-open Klasse <body> tag, und wenn es geschlossen ist, entfernen Sie es.

    $("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});
    Hi, danke für die schnelle Antwort. Mein Freund machte diese javascript für mich, so bin ich nicht ganz sicher, wo, um es in meiner js-Datei. Könnten Sie bitte führe mich durch?
    Man könnte nur hinzufügen <script> tag oberhalb </body> tag und in dieser schreiben Sie den JavaScript-code.
    Danke! nur fügte hinzu, dass in meiner html -, sondern seine nicht funktioniert... soll ich das ändern "#myModal" auf etwas anderes?
    Ja, Sie sollten es ändern, um die id oder Klasse des <div> element repräsentiert modal.
    meine main.js ist nicht mit "show" und "versteckt". Wie kann ich festlegen, wird der trigger in diesem Fall?

    InformationsquelleAutor IvanJ

  2. 4

    In die andere Updates, die ich bisher gesehen habe, wo Sie versuchten, zu gelten Feste Positionierung auf dem "BODY" - tag beim modal wird geöffnet, das Dokument gescrollt wird an der Spitze, da der Standard ist, um es in Position zu top 0. Ich versuchte dies und fand heraus, dass die beste Lösung ist, gelten overflow hidden im html-tag und nicht auf den body-tag. Dieser Weg, wir brauchen keine Feste Positionierung, und Sie werden bekommen, um das Dokument zu bleiben, wo es war, bevor modal geöffnet wurde.

    In der Korrektur, ich fand Sie nur anwenden müssen, so etwas wie

    function openModal(){
   $("html").css({"overflow-y":"hidden"})
   //open your modal box function in this area...
}

    - und das ist der fix. Sie können gehen Sie vor und erstellen Sie eine CSS-Klasse und wechseln Sie einfach die Klasse auf HTML beim öffnen oder schließen des modal-box. Aber das hat sicherlich behoben das problem für mich

    InformationsquelleAutor Michael Norward

  3. 2

    Können Sie verhindern, dass das scrollen von beliebigen DOM-Elements an, indem Sie seine CSS-Eigenschaft overflow auf hidden und position fixiert. Zum Beispiel:

    .disable-scroll {
    /* disable scrollbar on both x and y axis */
    overflow: hidden;

    /* disable scrollbar on x-axis only */
    overflow-x: hidden;

    /* disable scrollbar on y-axis only */
    overflow-y: hidden;

    /* disable scroll */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* OPTIONAL: none of dom element will be click-able */
    pointer-events: none;
}
    Hi, danke für die schnelle Antwort. Mein Freund machte diese javascript für mich, so bin ich nicht ganz sicher, wo, um es in meiner js-Datei. Könnten Sie bitte führe mich durch?

    InformationsquelleAutor ifadey

  4. 2

    Ich würde die html-und body-tags zu overflow: hidden; diese Weise kann der Benutzer nicht scrollen.

    jedoch, wenn der Inhalt Ihrer modalen sehr groß sind, würde ich empfehlen, mit einem bildlauffähigen container für die modal. Können Sie ein Beispiel sehen von was ich hier spreche: http://fortitude.io/javascript.html#js-modal

    InformationsquelleAutor lifeiscontent

  5. 2

    Einfach overflow: hidden; nicht schneiden Sie es für Chrome oder Firefox. Mit position: fixed; funktioniert, aber als Nebenwirkung können machen den Bildschirm springen beim schließen des modal.

    Dieses verstecken der scrollbar für Chrome Und FF

    .modal-open {
  -moz-appearance: menuimage;
}

.modal-open::-webkit-scrollbar {
   width: 0 !important;
}

    Dies wird jedoch nur deaktivieren Sie die Bildlaufleiste scrollen ist immer noch möglich, mit Tastatureingaben /Textauswahl /touch-gesten.

    Eine Möglichkeit ist, legen Sie die Höhe der Elemente im Körper auf null, z.B. alle divs

    .modal-open div {
  height: 0px;
}

    InformationsquelleAutor lofihelsinki

Schreibe einen Kommentar