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

Cela a fonctionné pour moi, aucune des méthodes précédentes n'a fonctionné.

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

Answer 2

Puisque votre contenu doit être dynamique, vous pouvez définir les propriétés css de la modale de façon dynamique sur show de la modale qui va redimensionner la modale en remplaçant ses spécifications par défaut. La raison en est que bootstrap applique une hauteur maximale au corps de la modale avec la règle css ci-dessous :

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

Vous pouvez donc ajouter des styles en ligne de manière dynamique à l'aide de jquery. css méthode :

Pour les versions plus récentes de bootstrap, utilisez 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%'
       });
});

Pour les anciennes versions de bootstrap, utilisez show

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

ou utiliser une règle css pour passer outre :

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

et ajoutez cette classe autoModal à vos modaux cibles.

Changez le contenu dynamiquement dans le fiddle, vous verrez la modale se redimensionner en conséquence. <a href="http://jsfiddle.net/GDVdN/" rel="noreferrer">Demo</a>

Version plus récente de bootstrap voir les disponibles event names .

• show.bs.modal Cet événement se déclenche immédiatement lorsque la méthode d'instance show est appelée. S'il est provoqué par un clic, l'élément cliqué est disponible comme propriété relatedTarget de l'événement.
• montré.bs.modal Cet événement est déclenché lorsque la modale a été rendue visible à l'utilisateur (il attendra la fin des transitions CSS). S'il est provoqué par un clic, l'élément cliqué est disponible comme propriété relatedTarget de l'événement.
• hide.bs.modal Cet événement est déclenché immédiatement après l'appel de la méthode d'instance hide.
• caché.bs.modal Cet événement est déclenché lorsque la modale a fini d'être masquée à l'utilisateur (il attendra la fin des transitions CSS).
• chargé.bs.modal Cet événement est déclenché lorsque la modale a chargé le contenu à l'aide de l'option à distance.

Ancienne version de bootstrap <a href="http://twitter.github.io/bootstrap/javascript.html#modals" rel="noreferrer">modal events</a> soutenu.

• Afficher - Cet événement se déclenche immédiatement lorsque la méthode d'instance show est appelée.
• présenté sur - Cet événement est déclenché lorsque la modale a été rendue visible à l'utilisateur (il attendra que les transitions css soient terminées).
• cacher - Cet événement est déclenché immédiatement après l'appel de la méthode d'instance hide.
• caché - Cet événement est déclenché lorsque la modale a fini d'être masquée à l'utilisateur (il attendra que les transitions css soient terminées).

Answer 3

Je n'ai pas réussi à faire fonctionner la réponse de PSL et j'ai découvert que tout ce que j'avais à faire était de définir le div contenant le contenu de la modale avec style="display: table;" . Le contenu de la modale indique lui-même la taille qu'il souhaite avoir et la modale s'y adapte.

Answer 4

Il y a plusieurs façons de le faire, si vous voulez écrire du css, ajoutez ce qui suit

.modal-dialog{
  display: table
}

Dans le cas où vous voudriez ajouter en ligne

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

N'ajoutez pas display:table; à la classe modal-content. cela a fait votre travail mais la disposition de votre modal pour la grande taille voir les captures d'écran suivantes. la première image est si vous ajoutez le style à modal-dialog si vous ajoutez un style à modal-content, il semble disposé.

Answer 5

Pour bootstrap 3, utilisez comme

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