2013-01-09 10 views
11

Ich habe einen Weg gefunden, dies zu tun:Bootstrap 2 - Satz Dialog/modale Position

Verwendung Margen Dialogposition zu steuern, so margin: -335px 0 0 -280px;

die Breite Einstellung müssen Sie die Ränder zurückgesetzt width: 900px; margin: -250px 0 0 -450px;

die Höhe Verwendung max-height max-height: 800px; auf

http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/

Basis einstellen Gibt es einen besseren Weg, dies zu tun? Gibt es eine Möglichkeit, mit diesem oder einem anderen Ansatz den Dialog nur auf zu verschieben und dort zu bleiben, bis er nicht mehr angezeigt wird?

Mit den ersten Randeinstellungen, die ich erwähnte, tut dies aber offensichtlich, sobald die Größe des Browsers geändert wird, wird es aus der Sicht verschoben.

Antwort

17

einfach die CSS Position außer Kraft setzen, zB

.modal, .modal.fade.in { 
    top: 0; /* was 10% */ 
} 

Hinweis, dann ist dies mit Bootstrap 2.2.2. Der einzige Rand ist ein negativer linker Rand, der die Hälfte der Breite des Modales ist (zentriert das Modal horizontal). Keine oberen Ränder sind erforderlich.

jsFiddle Beispiel hier - http://jsfiddle.net/uuwAn/1/

+0

Nein, leider hat das nicht funktioniert. Ich habe auf 2.2.2 aktualisiert. Ich war auf 2.2.1. Es sendet den modalen Off-Bildschirm - spielt mit der Spitze: * Es dauert etwa 40% für es oben auf dem Bildschirm zu sein. alles weniger und es schießt – zcourts

+1

Danke für das Update @Phil stellt sich heraus, es war der Ort der Markup. Es ist eine einzelne Seite App und ich legte nahe an die Taste, die es verwandt ist, ohne zu merken, dass es in einem Tag war, dessen css es beeinflusste, wenn es angezeigt wurde. Funktioniert jetzt gut. Vielen Dank – zcourts

0

Sie können die CSS an Ihrem Ende ändern, dieses Verhalten zu archivieren.

.modal-body { 
    max-height: 350px; 
    -webkit-overflow-scrolling: touch; 
} 

@media screen and (max-height: 450px), (max-height: 450px) { 
    .modal-body { 
     max-height: 130px; 
    } 

} 

Jetzt wird es gut auf den mobilen Geräten funktionieren. HINWEIS: erfolgt mit der Medienabfrage CSS.