Bootstrap Karosseriemodalgeschwindigkeiten offen, overflow: hidden nicht daran hindert, Scrollen

ich hier lesen (Prevent BODY from scrolling when a modal is opened), dass dieses ...Bootstrap Karosseriemodalgeschwindigkeiten offen, overflow: hidden nicht daran hindert, Scrollen

body.modal-open { 
    overflow: hidden; 
}

... wird verhindert, dass unter einem Bootstrap modal scrollen. Oder soll das schon die Standardeinstellung sein? (nicht sicher) Aus irgendeinem Grund kann ich das nicht zur Arbeit bringen. Ich verwende die neueste Version von Bootstrap in meiner Rails App. Hat Bootstrap das geändert?

In dem Bootstrap docs, heißt es ... „Die Modal-Plugin Ihre versteckten Inhalte auf Abruf schaltet, über Datenattribute oder JavaScript. Es fügt auch .modal-open zur <body> Standard Scrolling Verhalten außer Kraft zu setzen und erzeugt ein .modal-backdrop bereitzustellen ein Klickbereich zum Verwerfen angezeigter Modale, wenn außerhalb des Modals geklickt wird. "

Die .modal-backdrop für das Ablehnen von Modals beim Klicken auf den Hintergrund funktioniert tatsächlich, aber wie gesagt, das Überschreiben des Scrolling funktioniert nicht. Sehr merkwürdig, denn in meiner anderen Rails-App funktioniert das Überschreiben des Scrollings unter DOES, während das Zurückweisen von Modals beim Klicken auf den Hintergrund NICHT funktioniert. Sehr seltsam, weil ich sie scheinbar identisch implementiert habe.

Hinzufügen von position: fixed; zu meinem CSS stoppt in der Tat das Scrollen unter dem Modal, aber leider verursacht es die body nach oben zu springen. Ich möchte, dass der Körper in der gleichen vertikalen Position bleibt, egal wo ich eine modal öffne. Jede Hilfe wird sehr geschätzt. Vielen Dank.

Quelle

2016-05-07 Matt

Ich habe es tatsächlich mit etwas Hilfe von "Ling" in Prevent BODY from scrolling when a modal is opened arbeiten. Ich nutzte seine CSS und dann tat dies für meinen JS (eine Anpassung von lings JS) ...

// Prevent scrolling underneath Bootstrap modals 
$(document).ready(function() { 
    $("a.modal-initiator").on("click", function() { 
    currentScrollTop = $(window).scrollTop(); 
    $('html').addClass('noscroll').css('top', '-' + currentScrollTop + 'px'); 
    }); 

    $(".close-modal").on("click", function() { // modal 'close' buttons 
    resumeScrollingAferModal(); 
    }); 

    $("#modal").on("click", function(e) { // grey area outside modal 
    if(!$(e.target).is('modal-content')) { 
     resumeScrollingAferModal(); 
    } 
    }); 

    function resumeScrollingAferModal() { 
    $('html').removeClass('noscroll'); 
    $(window).scrollTop(currentScrollTop); 
    } 
});

Leider habe ich nicht wissen, wie eine globale Variable zu vermeiden, mit ‚currentScrollTop‘. Ich bin immer noch neugierig, warum die normale Bootstrap-Funktionalität für Modals für mich nicht funktionierte ....

Quelle

2016-05-07 10:16:07 Matt

Bootstrap Karosseriemodalgeschwindigkeiten offen, overflow: hidden nicht daran hindert, Scrollen

Antwort

Verwandte Themen