web-dev-qa-db-fra.com

Comment redimensionner le modal Twitter Bootstrap de manière dynamique en fonction du contenu

J'ai un contenu de base de données qui contient différents types de données, telles que des vidéos Youtube, Vimeo, du texte, des images Imgur, etc. Toutes ont une hauteur et une largeur différentes. Tout ce que j'ai trouvé en cherchant sur Internet change la taille en un seul paramètre. Il doit être identique au contenu de la fenêtre contextuelle. 

Ceci est mon code HTML. J'utilise aussi 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>
javascriptjqueryhtmlcsstwitter-bootstrap
89
Erdem Ece

Étant donné que votre contenu doit être dynamique, vous pouvez définir les propriétés css du modal de manière dynamique sur l'événement show du modal 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;
}

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

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

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

et ajoutez cette classe autoModal à vos modaux cibles.

Modifiez le contenu de manière dynamique dans le violon, vous verrez le modal redimensionné en conséquence. Demo

La version la plus récente de bootstrap est disponible event names .

  • show.bs.modal Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée. Si causé par un clic, l'élément cliqué est disponible en tant que propriété relatedTarget de l'événement.
  • shown.bs.modal Cet événement est déclenché lorsque le modal a été rendu visible par l'utilisateur (attendra la fin des transitions CSS). Si causé 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 de masquage a été appelée.
  • hidden.bs.modal Cet événement est déclenché lorsque l'utilisateur a caché le modal (l'utilisateur attend que les transitions CSS soient terminées).
  • chargé.bs.modal Cet événement est déclenché lorsque le modal a chargé le contenu à l'aide de l'option remote.

Ancienne version de bootstrap modal events prise en charge.

  • Show - Cet événement est déclenché immédiatement lorsque la méthode show instance est appelée.
  • shown - Cet événement est déclenché lorsque le modal a été rendu visible par l'utilisateur (attend que les transitions css soient terminées).
  • hide - Cet événement est déclenché immédiatement lorsque la méthode d'instance de masquage a été appelée.
  • hidden - Cet événement est déclenché lorsque l'utilisateur a caché le modal (l'utilisateur attend que les transitions css soient terminées).
105
PSL

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;   
}
97
Amit Shah

La réponse de PSL ne fonctionnant pas pour moi, j'ai trouvé qu'il ne me restait plus qu'à configurer le contenu modal du contenu modal avec style="display: table;". Le contenu modal lui-même indique sa taille et le modal le prend en charge.

20
Luminous

pour bootstrap 3 utiliser comme

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

Il y a plusieurs façons de faire cela si vous voulez écrire css puis ajoutez ce qui suit

.modal-dialog{
  display: table
}

Au cas où vous voudriez ajouter inline 

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

N'ajoutez pas display:table; à la classe de contenu modal. cela a bien fonctionné, mais la taille de votre modal est grande, voir les captures d'écran suivantes . La première image est si vous ajoutez du style à modal-dialog In case if you add style to modal-dialog si vous ajoutez du style au contenu modal. il semble disposé . enter image description here

6
waqas ali

Css simple travail pour moi 

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

Je remplace simplement le css:

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

Vous pouvez le faire si vous utilisez le plug-in de dialogue jquery 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 permettre aux utilisateurs de contrôler la taille si vous définissez redimensionnable sur true. Vous pouvez voir une démonstration à ce sujet à http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

1
Atanas Atanasov

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

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

.modal-dialog {
  align-self: center;
}
0
Kirk Ross

Mine Solution consistait simplement à ajouter ci-dessous le style .<div class="modal-body" style="clear: both;overflow: hidden;">

0
Furquan

mettre width:fit-content sur la div modale.

0
Subhashis Pal

Pour Bootstrap 2: ajuste automatiquement 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;');
  });
0
SudarP

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

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

donc si vous cherchez à redimensionner le modal width à une largeur plus grande, je suggérerais l’utiliser dans votre css par exemple:

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

Remarque ce paramètre width: 87vw; ne remplacera pas le max-width: 500px; de bootstrap.

0
Zulkifil

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

.modal-body {
    overflow-y: auto;
}
0
Brett Drake