Comment redimensionner dynamiquement Twitter Bootstrap modal en fonction du contenu

J'ai du contenu de 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 ont des hauteurs et 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 le même que le contenu de la fenêtre contextuelle.

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

Étant donné que votre contenu doit être dynamique, vous pouvez définir les propriétés css du modal de manière dynamique lors de l' showévénement du modal, ce qui redimensionnera le modal en remplaçant ses spécifications par défaut. La raison d'être bootstrap applique une hauteur maximale au corps modal avec la règle css comme ci-dessous:

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

Ainsi, vous pouvez ajouter des styles en ligne de manière dynamique en utilisant la cssméthode jquery :

Pour les nouvelles versions 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 utilisez une règle css pour remplacer:

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

et ajoutez cette classe autoModalà vos modaux cibles.

Changez le contenu dynamiquement dans le violon, vous verrez le modal se redimensionner en conséquence. Demo

La version plus récente de bootstrap voit le fichier disponible event names.

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

Ancienne version de bootstrap modal events prise en charge.

• Show - Cet événement se déclenche immédiatement lorsque la méthode de l'instance show est appelée.
• montré - Cet événement est déclenché lorsque le modal a été rendu visible à l'utilisateur (attendra la fin des transitions css).
• hide - Cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.
• hidden - Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (attendra la fin des transitions css).

Cela a fonctionné pour moi, rien de ce qui précède n'a fonctionné.

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

Je ne pouvais pas faire fonctionner la réponse de PSL pour moi, alors j'ai trouvé que tout ce que j'avais à faire était de définir la div contenant le contenu modal avec style="display: table;". Le contenu modal lui-même indique la taille qu'il souhaite et le modal l'adapte.

Il existe de nombreuses façons de le faire si vous souhaitez écrire du CSS, puis ajoutez ce qui suit

.modal-dialog{
  display: table
}

Dans le cas où vous souhaitez ajouter en ligne

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

N'ajoutez pas display:table;à la classe de contenu modal. il a fait votre travail mais disposez votre modal pour une grande taille, voir les captures d'écran suivantes. La première image est si vous ajoutez du style à la boîte de dialogue modale si vous ajoutez du style au contenu modal. il a l'air disposé.

pour bootstrap 3, utilisez comme

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

Simple Css fonctionne pour moi

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

Je remplace simplement le css:

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

défini width:fit-contentsur le div modal.

Vous pouvez le faire si vous utilisez le plugin jquery dialog de gijgo.com et définissez la largeur sur auto.

$("#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>

Vous pouvez également autoriser les utilisateurs à contrôler la taille si vous définissez redimensionnable sur true. Vous pouvez voir une démo à ce sujet sur http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Une solution CSS simple qui va centrer verticalement et horizontalement le modal:

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

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

Pour Bootstrap 2 Auto ajuster la hauteur du modèle de manière dynamique

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

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

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

Mine Solution était juste d'ajouter le style ci-dessous. <div class="modal-body" style="clear: both;overflow: hidden;">

Depuis Bootstrap 4 - il a un style de:

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

donc si vous cherchez à redimensionner la largeur modale à une largeur plus grande, je vous suggère de l'utiliser dans votre css par exemple:

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

Notez que ce paramètre width: 87vw;ne remplacera pas celui de bootstrap max-width: 500px;.

Ma recherche m'a conduit ici, alors autant ajouter mes deux cents d'idée. Si vous utilisez le modal Twitter Bootstrap convivial de Monkey, vous pouvez faire quelque chose comme ceci:

    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 t'aides.