Comment redimensionner dynamiquement la modale Twitter Bootstrap en fonction du contenu ?

Question

J'ai une base de données qui contient différents types de données, comme des vidéos Youtube, des vidéos Vimeo, du texte, des images Imgur, etc. Tous ces éléments ont des hauteurs et des largeurs différentes. Tout ce que j'ai trouvé en cherchant sur Internet, c'est de changer la taille en un seul paramètre. Il doit être identique au contenu de la fenêtre contextuelle.

Voici mon code HTML. J'utilise également Ajax pour appeler le contenu.

<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>

Answer 1

Pour Bootstrap 2 Auto ajuster la hauteur du modèle dynamiquement

  //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;');
  });

Answer 2

J'avais le même problème avec bootstrap 3 et la hauteur de la div modal-body qui ne voulait pas être supérieure à 442px. C'était tout le css nécessaire pour le résoudre dans mon cas :

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

Answer 3

Ma solution était juste d'ajouter du style en dessous. <div class="modal-body" style="clear: both;overflow: hidden;">

Answer 4

À partir de Bootstrap 4 - il a un style de :

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

donc si vous cherchez à redimensionner l modal width to some-width larger, je vous suggère d'utiliser ceci dans votre css par exemple :

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

Note ce cadre width: 87vw; ne remplacera pas l'option max-width: 500px; .

Answer 5

Ma recherche m'a conduit ici, alors autant ajouter mes deux cents d'idée. Si vous utilisez Une modale Twitter Bootstrap adaptée aux singes alors vous pouvez faire quelque chose comme ça :

    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();

J'espère que cela vous aidera.