2009-12-12 8 views
7

Ich habe ein modales Popup und wenn ich Inhalte lade, die größer als die Browserhöhe sind, kann ich nicht runterscrollen, um den Rest der Information zu sehen. Stattdessen kann der Hintergrund scrollen, aber das Popup wird nicht angezeigt.Wie kann ich das modale Popup seinen Inhalt mit der Seite scrollen lassen?

Stattdessen möchte ich das Popup bleiben lassen und wenn der Benutzer scrollt nach oben oder unten lassen Sie das Popup an Ort und Stelle und scrollen sie bis zum Ende des Inhalts. Wenn Sie einen super langen Post auf Facebook machen, funktioniert das Popup korrekt und ich würde gerne wissen, wie ich mit diesem Steuerelement denselben Effekt erzielen kann.

Antwort

0

Setzen Sie den Style overflow: auto auf den Containerblock.

+0

Wenn Sie Containerzug sagen, was werden Sie beziehen? Hast du das auch getestet? Legen Sie zwei Inhaltsseiten in ein Bedienfeld, das über das modale Popup angezeigt wird, und ohne Bildlaufleisten auf dem Bedienfeld selbst, können Sie alles durch Scrollen der Seite sehen? – Middletone

+0

Ich frage, weil das, was Sie vorgeschlagen haben, funktioniert nicht, wenn ich es versuche. Ich weiß, dass ich das div und die Panels scrollen kann, aber darum geht es mir nicht. – Middletone

5

In der CSS Ihres modalen Popups, stellen Sie die Breite des modalpop auf, dann stellen Sie overflow:auto. Dadurch erhalten Sie eine horizontale Bildlaufleiste. Beispiel:

Wenn also die Inhaltsbreite die 900px überschreitet, wird die horizontale Bildlaufleiste angezeigt. Das gleiche gilt für die vertikale Bildlaufleiste, wo Sie die Höhe des modalpop einstellen müssen.

+0

Das löst das Problem, wenn der Browser-Bildschirm mindestens 900 Pixel groß ist. Für eine Lösung mit einem Popup, das diese Seite füllen könnte, siehe meine Antwort. – DavRob60

2

Dieses Skript setzte die Popup-Höhe auf 90% der Bildschirmhöhe, dann konnten Sie den Überlauf einstellen: 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 stelle und die Lösung fand ich.

asp.net ModalPopupExtender : need to show scroll bar when overflow

2

Sie können eine Klasse mit dem Body-Tag hinzuzufügen, wenn das Popup geöffnet ist die Bildlaufleiste zu verbergen, und es zu entfernen, wenn die Popup-weggeht, dann sollten Sie Ihre Hintergrundposition sein: fest und die Höhe sollte die window.height() (erhalten Sie es dynamisch mit JS) und auch Überlauf: auto.

Was passiert mit all dem ist, dass, wenn das Popup höher als der Hintergrund ist, Sie eine nette Bildlaufleiste auf der rechten Seite bekommen, und weil Ihre Bildlaufleiste ausgeblendet ist, sehen Sie nur diese. Auch die Seite selbst scrollt nicht. So macht es Facebook mit seinem Bildbetrachter.

0

Sie können versuchen, diese für das Scrollen Modalpopup mit CONTENS: die PopupDragHandleControlID Setzen Sie ihn auf eine leere Platte zeigt, Satz neu positionieren mode = „None“ dies die modale halten in der gleichen Position fixiert, wie Sie die Seite blättern.

-1

Hier die einfachen und beste Arbeitslösung

diese Klasse zu Ihrer modalen Popup-Seite hinzufügen.

body.modal-open { 
 
overflow: auto; 
 
}

Verwandte Themen