Wie scrolle ich durch die Seite, wenn ein modaler Dialog länger als der Bildschirm ist?

Ich habe einen modalen Dialog in meiner App, der in y-Richtung ziemlich lang werden kann. Dies führt zu einem Problem, bei dem ein Teil des Dialoginhalts am unteren Rand der Seite ausgeblendet wird.

Ich möchte, dass die Bildlaufleiste des Fensters den Dialog scrollt, wenn er angezeigt wird und zu lang ist, um auf den Bildschirm zu passen, aber den Hauptteil hinter dem Modal belassen soll. Wenn Sie Trello verwenden , wissen Sie, was ich vorhabe.

Ist dies möglich, ohne JavaScript zur Steuerung der Bildlaufleiste zu verwenden?

Hier ist das CSS, das ich bisher auf mein Modal und meinen Dialog angewendet habe:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

benutz einfach

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

Es ordnet Ihr Modal an und gibt ihm dann eine vertikale Schriftrolle

Das hat es für mich behoben:

max-height: 100%;
overflow-y: auto;

BEARBEITEN : Ich verwende jetzt dieselbe Methode, die derzeit auf Twitter verwendet wird, wobei sich das Modal wie eine separate Seite über dem aktuellen Inhalt verhält und sich der Inhalt hinter dem Modal beim Scrollen nicht bewegt.

Im Wesentlichen ist es das:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Mit diesem CSS auf dem Modal:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Reine JS-Version (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Dies funktioniert unabhängig von der Höhe oder Breite der Seite oder des modalen Dialogfelds, ermöglicht das Scrollen, unabhängig davon, wo sich Ihre Maus / Ihr Finger befindet, hat keinen Jarring-Jump. Einige Lösungen haben das Scrollen im Hauptinhalt deaktiviert und sehen auch gut aus.

Veränderung position

position:fixed;
overflow: hidden;

zu

position:absolute;
overflow:scroll;

Hier ist meine Demo des modalen Fensters, dessen Größe automatisch an den Inhalt angepasst wird und die mit dem Scrollen beginnt, wenn es nicht zum Fenster passt.

Modale Fensterdemo (siehe Kommentare im HTML-Quellcode)

Alles nur mit HTML und CSS - kein JS erforderlich, um das modale Fenster anzuzeigen und seine Größe zu ändern (aber Sie benötigen es natürlich immer noch, um das Fenster anzuzeigen - in der neuen Version benötigen Sie JS überhaupt nicht).

Update (weitere Demos):

• Modales Fenster nach oben ausgerichtet

• Zentriertes Modalfenster

• Alte Demo, die Javascript verwendet

Der Punkt ist, äußere und innere DIVs zu haben, wobei die äußere die feste Position definiert und die innere das Scrollen erzeugt. (In der Demo gibt es tatsächlich mehr DIVs, damit sie wie ein tatsächliches modales Fenster aussehen.)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

Eine feste Positionierung allein hätte dieses Problem beheben sollen. Eine weitere gute Lösung, um dieses Problem zu vermeiden, besteht darin, Ihre modalen Divs oder Elemente am unteren Rand der Seite zu platzieren, nicht innerhalb des Layouts Ihrer Site. Die meisten modalen Plugins geben ihre modale Positionierung absolut an, damit der Benutzer weiter auf der Hauptseite scrollen kann.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Hier .. Funktioniert perfekt für mich

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

Auf einfache Weise können Sie dies tun, indem Sie dieses CSS hinzufügen. Sie haben dies also gerade zu CSS hinzugefügt:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

und es funktioniert!

position:fixedimpliziert, dass das modale Fenster relativ zum Ansichtspunkt fixiert bleibt. Ich stimme Ihrer Einschätzung zu, dass dies in diesem Szenario angemessen ist. Warum fügen Sie dem modalen Fenster selbst keine Bildlaufleiste hinzu?

Wenn ja, sollten korrekte max-heightund overflowEigenschaften den Trick machen.

Am Ende musste ich Änderungen am Inhalt der Seite hinter dem modalen Bildschirm vornehmen, um sicherzustellen, dass es nie lang genug wurde, um die Seite zu scrollen.

Sobald ich das getan habe, wurden die Probleme, die beim Anwenden position: absoluteauf den Dialog aufgetreten sind, behoben, da der Benutzer nicht mehr nach unten scrollen konnte.

Fensterseite Bildlaufleiste anklickbar, wenn Modal geöffnet ist

Dieser arbeitet für mich. Reines CSS.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Probieren Sie es aus und lassen Sie es mich wissen

Ich wollte meine reine CSS-Antwort auf dieses Problem der Modalitäten mit dynamischer Breite und Höhe hinzufügen. Der folgende Code funktioniert auch mit den folgenden Anforderungen:

1. Platzieren Sie das Modal in der Mitte des Bildschirms
2. Wenn modal höher als das Ansichtsfenster ist, scrollen Sie den Dimmer (nicht modaler Inhalt).

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / WENIGER:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

Auf diese Weise befindet sich das Modal immer im Ansichtsfenster. Die Breite und Höhe des Modals sind so flexibel, wie Sie möchten. Der Einfachheit halber habe ich mein Symbol zum Schließen entfernt.