110 votes

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

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>

4voto

Pascal Points 142

Le simple Css fonctionne pour moi

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

2voto

Andrew Gale Points 61

Je remplace simplement le css :

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

2voto

Subhashis Pal Points 21

Set width:fit-content sur le div modal.

1voto

Atanas Atanasov Points 357

Vous pouvez le faire en utilisant le plugin jquery dialog de gijgo.com et en définissant 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 attribuez la valeur true à resizable. Vous pouvez voir une démo à ce sujet sur http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

1voto

Kirk Ross Points 65

Une solution CSS simple qui permet de centrer verticalement et horizontalement la modale :

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X