Wie kann ich das modal-popup scrollen Sie den Inhalt mit der Seite?

Habe ich ein modal-popup und wenn es lädt Inhalte, die größer sind als der browser-Höhe, die ich nicht in der Lage bin zu scrollen Sie nach unten, um den rest der Informationen. Statt den hintergrund scrollen kann, aber das popup nicht.

Stattdessen würde ich gerne die popup-bleiben und, wenn der Benutzer führt einen Bildlauf nach oben oder nach unten verlassen Sie das popup-Menü im Ort und lassen Sie Sie nach unten scrollen Sie den Inhalt. Wenn Sie machen einen super langen post auf Facebook das popup korrekt funktioniert und ich würde gerne wissen, wie ich bekommen kann der gleiche Effekt mit dieser Steuerung.

InformationsquelleAutor Middletone | 2009-12-12
  1. 5

    In der css deines modal-popup-Menü legen Sie die Breite der modalpop, dann legen Sie die overflow:auto. Geben Sie die horizontale Bildlaufleiste. Beispiel:

    .ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

    So,wenn die content-Breite überschreiten 900px, die horizontale Bildlaufleiste wird angezeigt.
    Das gleiche gilt für die vertikale Bildlaufleiste, wo Sie brauchen, um die Höhe der modalpop.

    • Das löst das Problem, wenn der browser-Bildschirm ist mindestens 900px. Für eine Lösung mit einem popup, das umfassen könnte, zu füllen, die Seite, siehe meine Antwort.
    InformationsquelleAutor Public Helper
  2. 3

    Können Sie hinzufügen einer Klasse zum body tag, wenn das popup offen ist, verstecken Sie die Bildlaufleiste aus, und entfernen Sie es, wenn das popup Weg geht, dann ist dein hintergrund sein soll position:fixed und die Höhe sollte die Fenster.Höhe() (get it dynamisch mit JS), und auch overflow:auto.

    Was passiert mit all den ist, dass, wenn das popup ist größer als der hintergrund ist, erhalten Sie eine schöne Bildlaufleiste auf der rechten Seite, und weil Ihr Körper Bildlaufleiste wird ausgeblendet, Sie sehen nur das eine. Auch die Seite selbst nicht scrollen. Das ist so, wie Facebook es tut, mit Ihrer Bild-viewer.

    InformationsquelleAutor Mariano
  3. 2

    Diesem Skript legen Sie die popup Höhe von 90% der Bildschirmhöhe, dann konnten Sie das overflow:auto;

    <script type="text/javascript">
  function pageLoad() {
      $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script>

    hier eine Verwandte Frage, die ich und die Lösung, die ich gefunden.

    asp.net ModalPopupExtender : brauchen Sie, um zu zeigen, scroll bar, wenn die überlauf

    InformationsquelleAutor DavRob60
  4. 0

    Setzen Stil overflow: auto auf die container-block.

    • Wenn Sie sagen, block-container, was meinst du? Auch haben Sie tatsächlich testest es das? Legen Sie zwei Seiten von content in einen Bereich, der borught bis über die modal-popup und ohne Bildlaufleisten auf dem panel selbst kann man alles sehen, durch scrollen der Seite?
    • ich Frage deshalb, weil das, was Sie vorgeschlagen, funktioniert nicht, wenn ich es versuche. Ich weiß, dass ich scrollen der div und Paneele, aber das ist nicht das, was ich bin das Fragen.
    InformationsquelleAutor Ewan Todd
  5. 0

    Können Sie versuchen, diese zum scrollen modalpopup mit contens:
    Legen Sie die PopupDragHandleControlID deutete auf ein leeres Feld,
    set neu Positionieren-Modus = "None" dadurch wird der modal-Feste in der gleichen position, wie Sie die Seite scrollen.

    InformationsquelleAutor rushabh shah
  6. -1

    Hier die einfache und am besten funktionierende Lösung

    Hinzufügen, dass die Klasse, um Ihre modalen popup-Seite.

    CSS:

    body.modal-open {
overflow: auto;
}

    InformationsquelleAutor Mukesh Salaria
Schreibe einen Kommentar