So ändern Sie die Größe von Twitter Bootstrap dynamisch basierend auf dem Inhalt

Ich habe Datenbankinhalte mit unterschiedlichen Datentypen wie Youtube-Videos, Vimeo-Videos, Text, Imgur-Bildern usw. Alle haben unterschiedliche Höhen und Breiten. Alles, was ich beim Durchsuchen des Internets gefunden habe, ist, die Größe auf nur einen Parameter zu ändern. Es muss mit dem Inhalt im Popup identisch sein.

Das ist mein HTML-Code. Ich benutze auch Ajax, um den Inhalt aufzurufen.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

Da Ihr Inhalt dynamisch sein muss, können Sie die CSS-Eigenschaften des Modals dynamisch bei einem showEreignis des Modals festlegen, wodurch die Größe des Modals über seine Standardspezifikationen hinaus geändert wird. Der Grund dafür, dass Bootstrap eine maximale Höhe auf den Modalkörper mit der folgenden CSS-Regel anwendet:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

So können Sie Inline-Stile mithilfe der jquery- cssMethode dynamisch hinzufügen :

Für neuere Versionen von Bootstrap verwenden show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

Für ältere Versionen von Bootstrap verwenden show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

oder verwenden Sie eine CSS-Regel, um Folgendes zu überschreiben:

.autoModal.modal .modal-body{
    max-height: 100%;
}

und fügen Sie diese Klasse autoModalIhren Zielmodalen hinzu.

Ändern Sie den Inhalt dynamisch in der Geige. Sie werden sehen, dass die Größe des Modals entsprechend geändert wird. Demo

Neuere Version von Bootstrap siehe die verfügbaren event names.

• show.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode show instance aufgerufen wird. Wenn dies durch einen Klick verursacht wird, ist das angeklickte Element als relatedTarget-Eigenschaft des Ereignisses verfügbar.
• show.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet, bis die CSS-Übergänge abgeschlossen sind). Wenn dies durch einen Klick verursacht wird, ist das angeklickte Element als relatedTarget-Eigenschaft des Ereignisses verfügbar.
• hide.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide hide aufgerufen wurde.
• hidden.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).
• load.bs.modal Dieses Ereignis wird ausgelöst, wenn das Modal Inhalte mit der Remote-Option geladen hat.

Ältere Version von Bootstrap modal events unterstützt.

• Show - Dieses Ereignis wird sofort ausgelöst, wenn die show instance-Methode aufgerufen wird.
• gezeigt - Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
• hide - Dieses Ereignis wird sofort ausgelöst, wenn die Methode "hide instance" aufgerufen wurde.
• versteckt - Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).

Das hat bei mir funktioniert, keines der oben genannten hat funktioniert.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Ich konnte die Antwort von PSL nicht für mich arbeiten lassen, also musste ich nur das Div einstellen, das den modalen Inhalt enthält style="display: table;". Der modale Inhalt selbst sagt aus, wie groß er sein möchte und der modale nimmt ihn auf.

Es gibt viele Möglichkeiten, dies zu tun, wenn Sie CSS schreiben und dann Folgendes hinzufügen möchten

.modal-dialog{
  display: table
}

Für den Fall, dass Sie Inline hinzufügen möchten

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

Nicht display:table;zur Klasse für modalen Inhalt hinzufügen . Es hat Ihre Arbeit erledigt, aber Ihr Modal für große Größen verfügbar gemacht, siehe folgende Screenshots. Das erste Bild ist, wenn Sie dem Modal-Dialog einen Stil hinzufügen, wenn Sie dem Modal-Inhalt einen Stil hinzufügen. es sieht dispositioniert aus.

Für Bootstrap 3 verwenden Sie gerne

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Einfache CSS-Arbeit für mich

.modal-dialog { 
max-width : 100% ;
}

Ich überschreibe einfach das CSS:

.modal-dialog {
    max-width: 1000px;
}

setzen width:fit-contentauf den Modal div.

Sie können dies tun, wenn Sie das jquery-Dialog-Plugin von gijgo.com verwenden und die Breite auf auto einstellen.

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

Sie können den Benutzern auch erlauben, die Größe zu steuern, wenn Sie die Größenänderung auf true setzen. Eine Demo dazu finden Sie unter http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Eine einfache CSS-Lösung, die das Modal vertikal und horizontal zentriert:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Für Bootstrap 2 Modellhöhe automatisch dynamisch anpassen

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Ich hatte das gleiche Problem mit Bootstrap 3 und der Höhe des Modal-Body-Divs, die nicht größer als 442px sein wollte. Dies war alles, was CSS brauchte, um es in meinem Fall zu beheben:

.modal-body {
    overflow-y: auto;
}

Meine Lösung bestand nur darin, den folgenden Stil hinzuzufügen. <div class="modal-body" style="clear: both;overflow: hidden;">

Ab Bootstrap 4 hat es einen Stil von:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

Wenn Sie also die modale Breite auf eine größere Breite ändern möchten, würde ich vorschlagen, dies in Ihrem CSS zu verwenden, zum Beispiel:

.modal-dialog { max-width: 87vw; }

Beachten Sie, dass die Einstellung width: 87vw;die Bootstraps nicht überschreibt max-width: 500px;.

Meine Suche führte mich hierher, also könnte ich auch meine Idee im Wert von zwei Cent hinzufügen. Wenn Sie Monkey-freundliches Twitter Bootstrap-Modal verwenden , können Sie Folgendes tun:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

Hoffe das hilft.