come modificare il posizionamento predefinito di modal nel bootstrap?

<div class="modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 

     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 

    </div> 
    </div> 
</div>

Come posso modificare la posizione modale predefinita nel bootstrap, dove devo modificare per modificare la posizione predefinita.come modificare il posizionamento predefinito di modal nel bootstrap?

fonte

2014-07-14 dpndra

http: //stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window ... potrebbe essere utile per voi. –

Aggiungere il seguente css al tuo html e provare a cambiare l'alto, a destra, in basso , valori a sinistra.

.modal { 
    position: absolute; 
    top: 10px; 
    right: 100px; 
    bottom: 0; 
    left: 0; 
    z-index: 10040; 
    overflow: auto; 
    overflow-y: auto; 
}

fonte

2014-07-14 07:20:46 msnfreaky

come si può rendere lo sfondo di modale trasparente invece di quello nero. – dpndra

opacità: 1; o addclass 'fade' – msnfreaky

non c'è un modo per rimuovere il colore nero trasparente e rendere il modale a comparsa senza alcun effetto? e se voglio che il modale appaia senza alcun effetto? – dpndra

Per cambiare la posizione modale nella finestra è possibile destinare il div id modale, in questo esempio questo id è myModal3

<div id="modal3" class="modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 


#myModal3 { 
top:5%; 
right:50%; 
outline: none; 
overflow:hidden; 
}

fonte

2014-07-14 07:15:03 V31

la barra laterale si avvicina al centro come la nascondiamo – dpndra

overflow: nascosto nel css. Aggiornata la classe css # myModal3 – V31

ottengo una impostazione di questa classe di risultato migliore:

.modal-dialog { 
    position: absolute; 
    top: 50px; 
    right: 100px; 
    bottom: 0; 
    left: 0; 
    z-index: 10040; 
    overflow: auto; 
    overflow-y: auto; 
}

Con bootstrap 3.3.7.

(tutti i crediti per msnfreaky per l'idea ...)

fonte

2016-08-13 00:38:43 Bamboomy

come modificare il posizionamento predefinito di modal nel bootstrap?

risposta

Problemi correlati