Come impostare twitter bootstrap modal sempre più in alto?

Question

Come impostare twitter bootstrap modal sempre più in alto?

Esempio qui (cliccare: Lancio demo modale):

http://twitter.github.com/bootstrap/javascript.html#modals

Answer 1

se l'ID modale è "myModal"

Si potrebbe provare ad aggiungere uno stile come:

#myModal 
{ 
    width: 700px; 
    margin-top: -300px !important; 
    margin-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
} 

Answer 2

Con CSS:

.modal { 
    width: 900px; 
    margin-left: -450px; // half of the width 
} 

Answer 3

Nel file css, aggiungere una nuova definizione di classe:

.higherWider { 
    width:970px; 
    margin-top:-250px; 
} 

nel codice HTML, aggiungere higherWider all'interno della stringa di classe per il modal:

<div class="modal hide fade higherWider"> 

Answer 4

Per una dimensione in%, si potrebbe fare questo:

.modal-body 
{ 
    max-height:80%; 
} 
.modal 
{ 
    height:80%; 
    width:70%; 
    margin-left: -35%; 
} 
@media (max-width: 768px) { 
    .modal 
    { 
    width:90%; 
     margin-left: 2%; 
    } 
} 

Answer 5

In Bootstrap 3.1.1 hanno aggiunto modal-lg e modal-sm classi. È possibile controllare la dimensione modal utilizzando le query @media come fanno. Questo è un modo più globale di controllare la dimensione modal.

@media (min-width: 992px) { 
    .modal-lg { 
     width: 900px; 
     height: 900px; /* control height here */ 
    } 
} 

codice di esempio:

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

<!-- Small modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     ... 
    </div> 
    </div> 
</div> 

Answer 6

Una delle seguenti soluzioni ha funzionato per me:

1. Applicando style="width: 50%; height:50%;" alla div nella sezione modale con il class="modal-dialog" in questo modo

   <div class="modal-dialog" style="width: 50%; height:50%;"> 
   

   o

2. Creazione di una sezione di stile in questo modo

   #themodal .modal-dialog{ width:50%; height:50%;} 
   

Answer 7

Il modo più semplice per farlo è utilizzare il .modal-lg. Aggiungere alla classe modale-finestra all'interno del contenitore modale in questo modo:

<div class="modal fade"> 
    <div class="modal-dialog modal-lg" role="document"> 
      <div class="modal-content"> 
       I am now wider! 
      </div> 
    </div> 
</div> 

Answer 8

alterazione modello-dialogo di classe ha fatto il trucco per me

.modal-dialog { 
    width: 90%; 
} 

Answer 9

La risposta accettata funziona bene, però mi consiglia di utilizzare imbottitura piuttosto che margine. In questo modo mantieni la funzionalità di eliminazione quando fai clic all'esterno della finestra di dialogo modale.

#myModal { 
    width: 700px; 
    padding-top: -300px !important; 
    padding-left: -350px !important; 
} 

#myModal .modal-body { 
    max-height: 525px; 
}