So ändern Sie die Größe von Twitter Bootstrap dynamisch basierend auf dem Inhalt
Ich habe Datenbankinhalte, die verschiedene Arten von Daten enthalten, wie Youtube-Videos, Vimeo-Videos, Text, Imgur-Bilder usw. Alle haben unterschiedliche Höhen und Breiten. Bei der Suche im Internet habe ich nur die Größe in einen Parameter geändert. Es muss mit dem Inhalt im Popup identisch sein.
Dies ist mein HTML-Code. Ich benutze Ajax auch, 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 für das Ereignis show des Modals festlegen, wodurch die Größe des Modals über die Standardspezifikationen hinaus geändert wird. Der Grund dafür ist, dass Bootstrap eine maximale Höhe auf den modalen Körper anwendet, mit der CSS-Regel wie folgt:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
So können Sie Inline-Stile dynamisch hinzufügen, indem Sie die Methode jquery css verwenden:
Für neuere Versionen von Bootstrap verwenden Sie 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 Sie 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üge diese Klasse autoModal zu deinen 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 finden Sie im verfügbaren event names .
- show.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode show instance aufgerufen wird. Wenn durch einen Klick verursacht, ist das angeklickte Element als relatedTarget-Eigenschaft des Ereignisses verfügbar.
- shown.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 durch einen Klick verursacht, ist das angeklickte Element als relatedTarget-Eigenschaft des Ereignisses verfügbar.
- hide.bs.modal Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide instance aufgerufen wurde.
- hidden.bs.modal Dieses Ereignis wird ausgelöst, wenn der Benutzer das Modal nicht mehr sehen kann (wartet, bis die CSS-Übergänge abgeschlossen sind).
- loaded.bs.modal Dieses Ereignis wird ausgelöst, wenn der Modal mithilfe der Option remote Inhalt geladen hat.
Ältere Version von Bootstrap modal events unterstützt.
- Show - Dieses Ereignis wird sofort ausgelöst, wenn die Methode show instance aufgerufen wird.
- shown - Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (es wird gewartet, bis die CSS-Übergänge abgeschlossen sind).
- hide - Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide instance aufgerufen wurde.
- hidden - Dieses Ereignis wird ausgelöst, wenn der Benutzer das Modal nicht mehr sehen kann (wartet, bis die CSS-Übergänge abgeschlossen sind).
Das funktionierte für mich, keiner der oben genannten.
.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 mit style="display: table;" enthält. Der modale Inhalt selbst sagt aus, wie groß er sein möchte, und der modale Inhalt berücksichtigt ihn.
für Bootstrap 3 verwenden Sie gerne
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
Es gibt viele Möglichkeiten, dies zu tun, wenn Sie css schreiben und folgendes hinzufügen möchten
.modal-dialog{
display: table
}
Wenn Sie Inline hinzufügen möchten
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
Fügen Sie nicht display:table; zur Klasse für modale Inhalte hinzu. es hat deine Arbeit erledigt, aber dein Modal für große Größe angeordnet. Siehe folgende Screenshots . Das erste Bild ist, wenn Sie dem modal-dialog einen Stil hinzufügen. 
wenn Sie dem modal-content einen Style hinzufügen. es sieht disponiert aus . 
Einfache Css-Arbeit für mich
.modal-dialog {
max-width : 100% ;
}
Ich überschreibe einfach die CSS:
.modal-dialog {
max-width: 1000px;
}
Sie können dies tun, wenn Sie das Jquery-Dialog-Plugin von gijgo.com verwenden und die Breite auf auto setzen.
$("#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;
}
Meine Lösung war nur das Hinzufügen von style .<div class="modal-body" style="clear: both;overflow: hidden;">
setze width:fit-content auf die modale div.
Für Bootstrap 2 Automatische Anpassung der Modellhöhe
//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;');
});
Ab Bootstrap 4 hat es einen Stil von:
@media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
wenn Sie also die Größe von modal width auf eine etwas größere Breite ändern möchten, würde ich vorschlagen, dies in Ihrem CSS zu verwenden, zum Beispiel:
.modal-dialog { max-width: 87vw; }
Hinweis dass die Einstellung width: 87vw; den max-width: 500px; von bootstrap nicht überschreibt.
Ich hatte das gleiche Problem mit Bootstrap 3 und die Höhe des Modal-Body-Div, die nicht größer als 442px sein wollte. Dies war alles, was die CSS in meinem Fall brauchte, um das Problem zu beheben:
.modal-body {
overflow-y: auto;
}