Modal verursacht doppelte Bildlaufleiste

Question

Das Öffnen eines Modales auf meiner Website verursacht eine doppelte Bildlaufleiste (vertikal). Das Modal verwendet position: fixed und overflow: auto. Ich weiß, es ist overflow: auto verursacht das Problem, aber ich brauche diesen Stil, da mein Modal enthält eine Menge Inhalte, die in den meisten Fällen nicht in das Benutzer-Ansichtsfenster passen, daher Scrollen des Inhalts ist eine Voraussetzung.

.enquire-nav { 
    font-family: inherit; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background: rgba(36, 32, 33, .97); 
} 

Vielen Dank im Voraus:]

Answer 1

Am Ende fand ich, dass die beste Lösung war eine Klasse auf dem Körper zu schalten, wenn das Modal geöffnet ist, würde diese Klasse overflow-y: hidden hinzufügen. Dies ermöglicht es mir, den Inhalt des Modals zu scrollen, wenn es den Körper überläuft, aber nicht gleichzeitig den Körper selbst scrollen zu lassen. Keine doppelten Bildlaufleisten mehr.

Die jQuery:

$(".menu-trigger, .primary-nav-item, .hamburger-one").click(function() { 
    $(".mobilenav").fadeToggle(500); 
    $(".top-menu").toggleClass("top-animate"); 
    $(".mid-menu").toggleClass("mid-animate"); 
    $(".bottom-menu").toggleClass("bottom-animate"); 
    $('body').toggleClass("no-scroll"); 

    }); 

Die CSS:

.no-scroll { 
    overflow-y: hidden; 
} 

Answer 2

Also habe ich dieses Problem vor gelöst, während meine eigene jQuery modalen Plugin Aufbau aus. Hier ist ein Link zum Github Repo, als Referenz: https://github.com/thecox/bw-box. Ich werde herumstöbern und etwas von dem relevanten Styling finden, das das Problem gelöst hat. Hier ist die Hauptstruktur:

HTML

<div id="default-modal" class="bwbox__modal"> 
    <div class="bwbox__modal__outer"> 
    <div class="bwbox__modal__middle"> 
     <div class="bwbox__modal__inner"> 
     <a href="#" class="bwbox__modal__inner__close">CLOSE X</a> 
     <div class="bwbox__modal__inner__content"> 
      <!-- Content Goes Here --> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.bwbox__modal { 
    position: fixed; 
    display: none; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba(0, 0, 0, .8); 
    overflow-y: scroll; 
    z-index: 9999; 
} 

.bwbox__modal__outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bwbox__modal__middle { 
    position: relative; 
    display: table-cell; 
    vertical-align: middle; 
} 

.bwbox__modal__inner { 
    position: relative; 
    background: #fff; 
    font-size: 1em; 
    font-weight: 300; 
    text-align: left; 
    color: #555; 
    width: 90%; 
    max-width: 885px; 
    z-index: 9999; 
    padding: 2em 2% 1em; 
    margin: 30px auto; 

.bwbox__modal__inner__content { 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    text-align: center; 
} 

.bwbox__modal__inner__close { 
    position: absolute; 
    color: #555; 
    top: 10px; 
    right: 20px; 
    font-size: .9em; 
    text-decoration: none; 
} 

Grundsätzlich ist die äußere, mittlere und innere Behälter zentrieren den Behälter vertikal und horizontal in dem Rahmen in einer solchen So können Sie, wenn sie sich über die Fensterhöhe hinaus ausdehnen, noch scrollen. Vielleicht ziehen Sie es runter und schauen Sie sich die Demo an. Lassen Sie mich wissen, wenn Sie irgendwelche Fragen haben.