Come posso fare in modo che il popup modale scorra il suo contenuto con la pagina?

Question

Ho un popup modale e quando carica contenuti più alti dell'altezza del browser non riesco a scorrere verso il basso per visualizzare il resto delle informazioni. Invece lo sfondo può scorrere ma il popup no.

Invece mi piacerebbe che il popup rimanga chiuso e quando l'utente scorre verso l'alto o verso il basso lascia il popup in posizione e lascia che scorrono fino alla fine del contenuto. Se fai un post super lungo su Facebook il popup funziona correttamente e mi piacerebbe sapere come ottenere lo stesso effetto con questo controllo.

Answer 1

Inserire lo stile overflow: auto sul blocco contenitore.

Answer 2

Nel css del popup modale, impostare la larghezza del modalpop in su, quindi impostare overflow:auto. Questo ti darà la barra di scorrimento orizzontale. Esempio:

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

Così, quando la larghezza del contenuto supera i 900px, verrà visualizzata la barra di scorrimento orizzontale. Lo stesso vale per la barra di scorrimento verticale in cui è necessario impostare l'altezza del modalpop.

Answer 3

Questo script imposta l'altezza del popup al 90% dell'altezza dello schermo, quindi è possibile impostare l'overflow: automatico;

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

qui una domanda correlata che chiedo e la soluzione che ho trovato.

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

Answer 4

È possibile aggiungere una classe al tag corpo quando il popup è aperta per nascondere la barra di scorrimento, e rimuoverlo quando il popup va via, allora il vostro sfondo deve essere position: fixed e l'altezza dovrebbe essere the window.height() (prendilo dinamicamente con JS) e anche overflow: auto.

Ciò che accade con tutto ciò è che, se il popup è più alto dello sfondo, si ottiene una bella barra di scorrimento sulla destra, e poiché la barra di scorrimento del corpo è nascosta, si vede solo quella. Inoltre, la pagina stessa non scorre. Questo è il modo in cui Facebook lo fa con il loro visualizzatore di immagini.

Answer 5

Si può provare questo per lo scorrimento modalpopup con i suoi Contens: Impostare la PopupDragHandleControlID che punta ad un pannello vuoto, modalità di impostazione Riposizionare = "Nessuno" questo manterrà il modal fisso nella stessa posizione durante lo scorrimento della pagina.

Answer 6

Qui la soluzione semplice e migliore lavoro

Aggiungi questa classe alla tua pagina popup modale.

body.modal-open { 
 
overflow: auto; 
 
}