Wie kann ich die Standardbreite einer Twitter Bootstrap-Modalbox ändern?

373

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.

Nullpo
quelle
Das Bootstrap-Plugin bietet nicht so viele Optionen. Versuchen Sie, die Klasse in der Bootstrap-CSS-Datei zu finden und festzustellen, ob sie über CSS festgelegt wurde. Dann sollten Sie in der Lage sein, sie zu überschreiben, oder zumindest eine bessere Ahnung davon zu haben, um welches Element es sich handelt.
GillesC
3
Schauen Sie sich die Antwort von Nick N an, um eine sehr nette Antwort zu erhalten! stackoverflow.com/a/16090509/539484
OnTheFly

Antworten:

373

AKTUALISIEREN:

In müssen bootstrap 3Sie den Modaldialog ändern. In diesem Fall können Sie die Klasse modal-adminan der Stelle hinzufügen, an der sie modal-dialogsteht.

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:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In Ihrem Fall:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

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.

Marco Johannesen
quelle
2
Scrollen Sie unten für eine bessere (reaktionsschnelle) Antwort dank @NickN!
OnTheFly
1
@FloatingRock Sie können es reaktionsschnell machen, schauen Sie sich meine Antwort an
Nick N.
1
@ NickN. Mörder! Vielen Dank Nick
FloatingRock
47
Bootstrap 3 macht dies einfacher. .modal .modal-dialog { width: 800px; }Die linke Position wird automatisch berechnet.
Gavin
1
Eigentlich funktioniert das bei mir nicht. Die von @ZimSystem kommentierte Lösung hat es geschafft.
Tonjo
270

Wenn Sie es nur mit CSS ansprechen möchten, verwenden Sie Folgendes:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Anmerkung 1: Ich habe eine .largeKlasse 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).

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Hinweis 3: In Bootstrap 3 und 4 gibt es eine modal-lgKlasse. 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 fixedModalitäten verwendet. In diesem Fall können Sie es versuchen width:80%; left:10%;(Formel: left = 100 - width / 2).

Nick N.
quelle
Dies scheint dazu zu führen, dass das Modal auf sehr schmalen Bildschirmen zur Hälfte vom Bildschirm abweicht.
Cofiem
5
Cofiem, verwenden Sie eine Medienabfrage, um dies zu beheben
Nick N.
1
@ NickN. Meine Medienabfrage hat das Problem nicht behoben. Können Sie ein Beispiel hinzufügen? Missachtung, ich habe es verstanden. Ich hatte maximale Breite statt minimale Breite. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD
Ich finde, dass die Verwendung von% nicht genug Kontrolle bietet, wie die Verwendung der Spalten, die bereits in Bootstrap integriert sind.
Alex
@Alex Ich denke, es gibt Ihnen mehr Kontrolle, wie würden Sie es mit den vorhandenen Spalten tun?
Nick N.
107

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

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}
Bogengrad
quelle
3
richtig für bootstrap3. funktioniert ohne Randanpassung! thx
SQueek
1
Ich habe das ID-Attribut in der Antwort entfernt, da es nicht erforderlich ist.
Arcdegree
es funktioniert, aber es reagiert nicht, wenn mlunoe oder Dave antworten.
Ksiomelo
80

Wenn Sie etwas möchten, das das relative Design nicht beeinträchtigt, versuchen Sie Folgendes:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

Wie @Marco Johannesen sagt, ist der "Körper" vor dem Selektor so, dass er eine höhere Priorität als die Standardeinstellung hat.

mlunoe
quelle
4
Ich empfehle , mit nur margin-left:auto; margin-right:auto;statt den autoganzen Weg um
cwd
In einigen Fällen kann es erforderlich sein top: 30%, dass der Prozentsatz vom Inhalt abhängt.
bool.dev
6
Dies funktioniert gut für mich, wenn ich die .modal.fade.in-Regel weglasse, die das Modal in Bootstrap V2.2.2 ganz nach unten verschiebt.
Ramiro
1
Dies funktionierte mit dem modalen Beispiel ANGULAR-UI ... Legen Sie einfach den Code in einer CSS-Datei ab und laden Sie ihn auf die Seite ... angle-ui.github.io/bootstrap/#/modal ... Beispiel auf plnkr.co ausführen / edit / GYmc9s? p = Vorschau
Marcello de Sales
1
großartig diese lösung funktioniert gut auf 2.3.2 bootstrap und MAIN im internet explorer 8,9,10 !!!! Lösung mit Rand-links: -40% ist im Internet Explorer falsch !!!
Cioxideru
41

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-smentlang der modal-dialogKlasse angezeigt wird und ein kleines Modal angibt. Es kann die Werte smfür klein, mdmittel und lggroß enthalten.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>
Tum
quelle
Fügte es meiner Antwort hinzu :)
Tum
3
Sollte dies nicht die beste Antwort sein? Ich nehme an, die beste Antwort könnte Ihnen beim Anpassen helfen, aber die meisten Anwendungsfälle sollten von den eingebauten Klassen von Bootstrap erfüllt werden.
WebSpanner
Ich benutze Bootstrap 3.x und ich scheine keine modal-mdKlasse zu haben .
James Poulose
34

Denn so Bootstrap 3geht's.

Fügen Sie modal-wideIhrem HTML-Markup einen Stil hinzu (wie aus dem Beispiel in den Bootstrap 3-Dokumenten angepasst ).

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

und fügen Sie das folgende CSS hinzu

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

Es besteht keine Notwendigkeit außer Kraft zu setzen margin-leftin Bootstrap 3auf diese nun zentriert erhalten werden.

Dave Sag
quelle
3
Um Verwirrung zu vermeiden, gibt es keinen technischen Grund, die modal-wideKlasse hinzuzufügen , was bedeutet, dass es sich nicht um eine "interne" Bootstrap-Klasse handelt. Sie können einfach tun#myModal .modal-dialog { width: 80%; }
Gavin
1
Ja. Aber es als Stil zu machen, macht es wiederverwendbarer.
Dave Sag
2
Ja, ich verstehe. Es ist nur oft schwierig, den Unterschied zwischen einer Bootstrap-Klasse und einer benutzerdefinierten Klasse zu erkennen, deshalb wollte ich mir das notieren.
Gavin
20

In Bootstrap 3 benötigen Sie lediglich Folgendes

<style>
    .modal .modal-dialog { width: 80%; }
</style>

Die meisten der oben genannten Antworten haben bei mir nicht funktioniert !!!

Alupotha
quelle
Wissen Sie, wie man die Modalhöhe ändert? Vielen Dank für Ihre Antwort, es funktioniert wie ein Zauber :)
FrenkyB
17

Die Lösung wurde von dieser Seite übernommen

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});
römisch
quelle
15

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.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">
Dave
quelle
Warum die Abwahl?! Es gab mir absolut und sauber ein schönes breites Dialogfeld! Und verwendet nur "richtige" Bootstrap-Klassen!
Dave
Versuchen Sie, einige Ihrer HTML-Elemente zurückzusetzen - verwenden Sie die einfachste Struktur, die Sie können, um sie zu testen.
Dave
13

Bootstrap 3: Um die Reaktionsfunktionen für kleine und extra kleine Geräte beizubehalten, habe ich Folgendes getan:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
user2823201
quelle
es ist richtig. das funktioniert bei mir. Vergessen Sie nicht, die Eigenschaft width für ein ansprechendes Layout auf XX% zu ändern. Übrigens ist die Version in meinem Fall 3.0.3
Jerry Chen
7

Dies ist, was ich getan habe, in meiner custom.css habe ich diese Zeilen hinzugefügt und das war alles.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Natürlich können Sie die Größe der Breite ändern.

clarenswd
quelle
7

Wenn Bootstrap> 3 ist, fügen Sie Ihrem Modal einfach Stil hinzu.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
Sreekanth Karini
quelle
6

Ich habe diese Lösung gefunden, die für mich besser funktioniert. Sie können dies verwenden:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

oder dies je nach Ihren Anforderungen:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

Siehe den Beitrag, in dem ich das gefunden habe: https://github.com/twitter/bootstrap/issues/675

PedroSaiz
quelle
5

FYI Bootstrap 3 behandelt die linke Eigenschaft automatisch. Durch einfaches Hinzufügen dieses CSS wird die Breite geändert und zentriert:

.modal .modal-dialog { width: 800px; }
Gavin
quelle
Arbeitete für B3! Vielen Dank!
Bagata
4

Behalten Sie das reaktionsschnelle Design bei und stellen Sie die Breite nach Ihren Wünschen ein.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Halte es einfach.

obfk
quelle
4

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.

.modal-dialog {
    width: 70%;
}
Faisal
quelle
3

Bei Bootstrap 3 ist lediglich ein Prozentwert erforderlich, der dem Modaldialog über CSS zugewiesen wird

CSS

#alertModal .modal-dialog{
     width: 20%;
}
Nav
quelle
1
Ja, das Rasiermesser des Occams geht an dieses. getestet auf 3.0 funktioniert
super
3

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

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

Und dann etwas jQuery, um bei Bedarf die Höhe des Inhaltsbereichs anzupassen

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Vollständige Beschreibung und Code unter http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Scott Dawson
quelle
3

In Bootstrap 3 mit CSS können Sie einfach Folgendes verwenden:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Dies stellt sicher, dass Sie das Design der Seite nicht beschädigen, da wir .modal-dialogstattdessen .modaldas verwenden, das sogar auf die Schattierung angewendet wird.

Saadel
quelle
2

Versuchen Sie Folgendes: (siehe Live-Beispiel für jsfiddle hier: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​
Periklis
quelle
2

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 -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>


2) Fügen Sie ein wenig CSS hinzu, um das Modal in voller Breite zu machen -

.modal-dialog {
    width: 100% }


3) Alternativ können Sie eine zusätzliche Klasse hinzufügen, wenn Sie andere Modalitäten haben -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }


4) Fügen Sie eine Zeile / Spalten hinzu, wenn Sie Modalitäten unterschiedlicher Größe wünschen -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>
Alex
quelle
2

Fügen Sie Ihrer CSS-Datei Folgendes hinzu

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }
kismet
quelle
2

Verwenden Sie das folgende Skript:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Demo :

Demo auf GIF

Janusz Ładecki
quelle
2

Ich habe es für Bootstrap 4.1 gelöst

Mix aus zuvor veröffentlichten Lösungen

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

Patricio Moraga
quelle
1

Erreichtes erwartetes Ergebnis mit,

.modal-dialog {
    width: 41% !important;
}
Aamir
quelle
1

Bootstrap 3.xx.

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

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

        </form>

    </div>
</div>

Beachten Sie, dass ich die Klasse .employeeModal in der zweiten Division hinzugefügt habe. Dann stylen Sie diese Klasse.

.employeeModal{
        width: 700px;
    }

Screenshot des Code-Snippets

Neutral
quelle
0

Ich habe es so benutzt und es funktioniert perfekt für mich

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
Belal Mazlom
quelle
0

Weniger basierte Lösung (kein js) für Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Dann, wo immer Sie eine modale Breite angeben möchten:

#myModal {
    .modal-width(700px);
}
sinelaw
quelle
0

Ich habe SCSS und das voll ansprechende Modal verwendet:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 
Rodolfo Jorge Nemer Nogueira
quelle
0
you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

oder

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }
NK Chaudhary
quelle