Ich habe folgendes versucht:
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
Und dieses Javascript:
$('.modal-admin').css('width', '750px');
$('.modal-admin').css('margin', '100px auto 100px auto');
$('.modal-admin').modal('show')
Das Ergebnis ist nicht das, was ich erwartet habe. Das Modal oben links befindet sich in der Mitte des Bildschirms.
Kann mir jemand helfen. Hat das noch jemand versucht? Ich nehme an, es ist keine ungewöhnliche Sache, das tun zu wollen.
Antworten:
AKTUALISIEREN:
In müssen
bootstrap 3
Sie den Modaldialog ändern. In diesem Fall können Sie die Klassemodal-admin
an der Stelle hinzufügen, an der siemodal-dialog
steht.Ursprüngliche Antwort (Bootstrap <3)
Gibt es einen bestimmten Grund, warum Sie versuchen, es mit JS / jQuery zu ändern?
Sie können dies problemlos mit nur CSS tun, sodass Sie das Styling nicht im Dokument vornehmen müssen. In Ihrer eigenen benutzerdefinierten CSS-Datei fügen Sie Folgendes hinzu:
In Ihrem Fall:
Der Grund, warum ich body vor den Selektor stelle, ist, dass er eine höhere Priorität als der Standard hat. Auf diese Weise können Sie es einer benutzerdefinierten CSS-Datei hinzufügen und Bootstrap problemlos aktualisieren.
quelle
.modal .modal-dialog { width: 800px; }
Die linke Position wird automatisch berechnet.Wenn Sie es nur mit CSS ansprechen möchten, verwenden Sie Folgendes:
Anmerkung 1: Ich habe eine
.large
Klasse verwendet. Sie können dies auch normal tun.modal
Hinweis 2: In Bootstrap 3 wird der negative linke Rand möglicherweise nicht mehr benötigt (nicht persönlich bestätigt).
Hinweis 3: In Bootstrap 3 und 4 gibt es eine
modal-lg
Klasse. Dies mag also ausreichend sein, aber wenn Sie darauf reagieren möchten, benötigen Sie immer noch das Update, das ich für Bootstrap 3 bereitgestellt habe.In einigen Anwendungen werden
fixed
Modalitäten verwendet. In diesem Fall können Sie es versuchenwidth:80%; left:10%;
(Formel: left = 100 - width / 2).quelle
@media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
Wenn Sie Bootstrap 3 verwenden, müssen Sie das Modal-Dialog-Div und nicht das Modal-Div ändern, wie es in der akzeptierten Antwort angezeigt wird. Um die Reaktionsfähigkeit von Bootstrap 3 zu erhalten, ist es wichtig, das Override-CSS mithilfe einer Medienabfrage zu schreiben, damit das Modal auf kleineren Geräten die volle Breite hat.
In dieser JSFiddle können Sie mit verschiedenen Breiten experimentieren.
HTML
CSS
quelle
Wenn Sie etwas möchten, das das relative Design nicht beeinträchtigt, versuchen Sie Folgendes:
Wie @Marco Johannesen sagt, ist der "Körper" vor dem Selektor so, dass er eine höhere Priorität als die Standardeinstellung hat.
quelle
margin-left:auto; margin-right:auto;
statt denauto
ganzen Weg umtop: 30%
, dass der Prozentsatz vom Inhalt abhängt.In Bootstrap 3+ ist die Verwendung der size-Eigenschaft die am besten geeignete Methode zum Ändern der Größe eines modalen Dialogfelds. Unten sehen Sie ein Beispiel, das
modal-sm
entlang dermodal-dialog
Klasse angezeigt wird und ein kleines Modal angibt. Es kann die Wertesm
für klein,md
mittel undlg
groß enthalten.quelle
modal-md
Klasse zu haben .Denn so
Bootstrap 3
geht's.Fügen Sie
modal-wide
Ihrem HTML-Markup einen Stil hinzu (wie aus dem Beispiel in den Bootstrap 3-Dokumenten angepasst ).und fügen Sie das folgende CSS hinzu
Es besteht keine Notwendigkeit außer Kraft zu setzen
margin-left
inBootstrap 3
auf diese nun zentriert erhalten werden.quelle
modal-wide
Klasse hinzuzufügen , was bedeutet, dass es sich nicht um eine "interne" Bootstrap-Klasse handelt. Sie können einfach tun#myModal .modal-dialog { width: 80%; }
In Bootstrap 3 benötigen Sie lediglich Folgendes
Die meisten der oben genannten Antworten haben bei mir nicht funktioniert !!!
Code-Snippet anzeigen
quelle
Die Lösung wurde von dieser Seite übernommen
quelle
In Version 3 von Bootstrap gibt es eine einfache Methode, um ein Modal größer zu machen. Fügen Sie einfach die Klasse modal-lg neben modal-dialog hinzu.
quelle
Bootstrap 3: Um die Reaktionsfunktionen für kleine und extra kleine Geräte beizubehalten, habe ich Folgendes getan:
quelle
Dies ist, was ich getan habe, in meiner custom.css habe ich diese Zeilen hinzugefügt und das war alles.
Natürlich können Sie die Größe der Breite ändern.
quelle
Wenn Bootstrap> 3 ist, fügen Sie Ihrem Modal einfach Stil hinzu.
quelle
Ich habe diese Lösung gefunden, die für mich besser funktioniert. Sie können dies verwenden:
oder dies je nach Ihren Anforderungen:
Siehe den Beitrag, in dem ich das gefunden habe: https://github.com/twitter/bootstrap/issues/675
quelle
FYI Bootstrap 3 behandelt die linke Eigenschaft automatisch. Durch einfaches Hinzufügen dieses CSS wird die Breite geändert und zentriert:
quelle
Behalten Sie das reaktionsschnelle Design bei und stellen Sie die Breite nach Ihren Wünschen ein.
Halte es einfach.
quelle
Wenn Sie die Klasse
model-dialog
ändern, können Sie das erwartete Ergebnis erzielen. Diese kleinen Tricks funktionieren bei mir. Ich hoffe, es wird Ihnen helfen, dieses Problem zu lösen.quelle
Bei Bootstrap 3 ist lediglich ein Prozentwert erforderlich, der dem Modaldialog über CSS zugewiesen wird
CSS
quelle
Ich habe eine Kombination aus CSS und jQuery zusammen mit Hinweisen auf dieser Seite verwendet, um mit Bootstrap 3 eine flüssige Breite und Höhe zu erstellen.
Zunächst einige CSS zur Behandlung der Breite und der optionalen Bildlaufleiste für den Inhaltsbereich
Und dann etwas jQuery, um bei Bedarf die Höhe des Inhaltsbereichs anzupassen
Vollständige Beschreibung und Code unter http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
quelle
In Bootstrap 3 mit CSS können Sie einfach Folgendes verwenden:
Dies stellt sicher, dass Sie das Design der Seite nicht beschädigen, da wir
.modal-dialog
stattdessen.modal
das verwenden, das sogar auf die Schattierung angewendet wird.quelle
Versuchen Sie Folgendes: (siehe Live-Beispiel für jsfiddle hier: http://jsfiddle.net/periklis/hEThw/1/ )
quelle
Anstatt Prozentsätze zu verwenden, um das Modal reaktionsfähig zu machen, kann die Verwendung der Spalten und anderer reaktionsfähiger Elemente, die bereits in Bootstrap integriert sind, stärker kontrolliert werden.
So reagieren Sie auf das Modal / die Größe einer beliebigen Anzahl von Spalten:
1) Fügen Sie ein zusätzliches Div um das Modal-Dialog-Div mit einer Klasse von .container hinzu -
2) Fügen Sie ein wenig CSS hinzu, um das Modal in voller Breite zu machen -
3) Alternativ können Sie eine zusätzliche Klasse hinzufügen, wenn Sie andere Modalitäten haben -
4) Fügen Sie eine Zeile / Spalten hinzu, wenn Sie Modalitäten unterschiedlicher Größe wünschen -
quelle
Fügen Sie Ihrer CSS-Datei Folgendes hinzu
quelle
Verwenden Sie das folgende Skript:
Demo :
quelle
Ich habe es für Bootstrap 4.1 gelöst
Mix aus zuvor veröffentlichten Lösungen
quelle
Erreichtes erwartetes Ergebnis mit,
quelle
Bootstrap 3.xx.
Beachten Sie, dass ich die Klasse .employeeModal in der zweiten Division hinzugefügt habe. Dann stylen Sie diese Klasse.
quelle
Ich habe es so benutzt und es funktioniert perfekt für mich
quelle
Weniger basierte Lösung (kein js) für Bootstrap 2:
Dann, wo immer Sie eine modale Breite angeben möchten:
quelle
Ich habe SCSS und das voll ansprechende Modal verwendet:
quelle
oder
quelle