Come far scorrere la pagina quando una finestra di dialogo modale è più lunga della schermata?

Nella mia app ho una finestra di dialogo modale che può essere piuttosto lunga nella direzione y. Questo introduce un problema in cui alcuni dei contenuti della finestra di dialogo sono nascosti nella parte inferiore della pagina.Come far scorrere la pagina quando una finestra di dialogo modale è più lunga della schermata?

enter image description here

vorrei che la barra di scorrimento della finestra per scorrere la finestra di dialogo quando viene visualizzato e troppo lungo per essere sullo schermo, ma lasciare il corpo principale posto dietro il modale. Se usi Trello allora sai cosa sto cercando.

Questo è possibile senza l'utilizzo di JavaScript per controllare la barra di scorrimento?

Ecco l'CSS ho applicato alla mia modale e dialogo finora:

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; 
}

fonte

2012-05-07 David Tuite

prova overflow: a uto o overflow: scorri nella finestra di dialogo ... –

basta usare

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

sarà organizzare il vostro modale e poi dargli uno scorrimento verticale

fonte

2016-01-20 10:47:16

Questa è solo magia! Grazie – Nicwenda

Questa dovrebbe essere la risposta accettata. Elegante e semplice – brianfit

perché dobbiamo usare 210px? C'è qualche ragione particolare dietro di esso? – ShellZero

Change position

position:fixed; 
overflow: hidden;

position:absolute; 
overflow:scroll;

fonte

2012-05-07 04:33:49

Non funziona, ho paura. È come se la finestra non si accorgesse che il dialogo ha altezza. –

Il problema è 'position: fixed;' Potrebbe essere cambiato in assoluto o altro? –

Se lo faccio, corro in un altro problema.Se l'utente è già scostato verso il basso nella pagina quando aprono la finestra di dialogo, apparirà nella parte superiore della pagina, fuori dal tiro della finestra corrente. –

position:fixed implica che, beh, il la finestra modale rimarrà fissa rispetto al punto di vista. Sono d'accordo con la tua valutazione che è appropriato in questo scenario, con questo in mente perché non aggiungi una barra di scorrimento alla finestra modale stessa?

In tal caso, è necessario correggere le proprietà max-height e overflow.

fonte

2012-05-07 05:03:54

-1

Alla fine mi avevano dovuto apportare modifiche al contenuto della pagina dietro lo schermo modale per garantire che essa non ha mai avuto abbastanza a lungo per scorrere la pagina.

Una volta eseguita questa operazione, i problemi riscontrati durante l'applicazione di position: absolute alla finestra di dialogo sono stati risolti in quanto l'utente non è più in grado di scorrere la pagina verso il basso.

fonte

2012-05-23 14:05:44

+14

Non sembra che sia stato * veramente * corretto il problema .. –

hai appena saltato il tuo problema –

e hai anche risposto alla tua domanda, quindi perché hai posto la domanda qui? – Thiyagu

posizionamento fisso da solo avrebbe dovuto fissare quel problema, ma un'altra buona soluzione per evitare questo problema è quello di inserire il vostro div o elementi modali nella parte inferiore della pagina non all'interno il layout siti. Molti plugin modali forniscono il loro posizionamento modale assoluto per consentire all'utente di mantenere lo scorrimento della pagina principale.

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


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

     </body> 
</html>

fonte

2013-11-17 17:22:52 Chimdi2000

Questo è ciò che ha risolto il tutto per me:

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

EDIT: io uso lo stesso metodo attualmente utilizzato su Twitter dove il modale si comporta un po 'come una pagina separata in cima alla contenuto corrente e il contenuto dietro il modale non si muove mentre si scorre.

In sostanza è questa:

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

Con questo CSS sul modal:

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

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure versione JS (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

questo funziona non importa l'altezza o la larghezza della pagina o della finestra di dialogo modale, consente lo scorrimento indipendentemente dal mouse/finge r è, non ha il salto stridente di alcune soluzioni che disabilitano lo scroll sul contenuto principale, ed è anche bello.

fonte

2013-12-05 07:05:13 0x0049

Ecco la mia demo della finestra modale che si ridimensiona automaticamente al suo contenuto e inizia a scorrere quando non si adatta alla finestra.

Modal window demo (vedi commenti nel codice sorgente HTML)

Tutto fatto solo con HTML e CSS - nessun JS necessari per visualizzare e ridimensionare la finestra modale ~~(ma è comunque necessario per visualizzare la finestra di corso~~ - nella nuova versione non hai affatto bisogno di JS).

Update (altre demo):

Il punto è avere DIV esterno ed interno in cui quella esterna definisce la posizione fissa e l'interno crea lo scorrimento. (Nella demo ci sono in realtà più DIV per farli apparire come una finestra modale effettivo.)

 #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 */ 
     }

fonte

2014-04-16 14:23:54

È possibile bloccare la pagina una volta che il popup è aperto per impedire lo scorrimento? Se l'utente ha il mouse fuori dal popup, scorrerà la pagina invece del popup e una volta che ciò accadrà e passerà oltre il popup, otterrà il popup e lo scorrimento della pagina. Grazie – Adyyda

@Adyyda È possibile interrompere lo scorrimento avvolgendo la pagina in un DIV con "overflow: hidden" e imposta le sue dimensioni allo stesso modo della pagina e il suo 'margin-top' a negativo del suo' scroll-top'. –

Questa era una buona soluzione appropriata Radek - reattivo, cross browser, fatto semplicemente usando CSS. Mi ha salvato un po 'di tempo, grazie –

Finestra pagina Barra di scorrimento cliccabile quando modale è aperta

Questo funziona per me. CSS puro.

<style type="text/css"> 

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

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

</style>

Provatelo e fatemi sapere

fonte

2015-09-26 00:21:27

Qui .. funziona perfettamente per me

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

fonte

2016-10-27 09:53:09

Come far scorrere la pagina quando una finestra di dialogo modale è più lunga della schermata?

risposta

Problemi correlati