Comment redimensionner dynamiquement les modaux d'amorçage de Twitter pour le contenu variable ?

Redimensionnement dynamique des modaux d'amorçage Twitter pour un contenu variable

Lorsque vous traitez une variété de types de contenu dans les modaux, tels que des vidéos, des images ou texte, il peut être difficile de garantir que la taille du modal s'ajuste dynamiquement en fonction du contenu. La plupart des solutions disponibles en ligne ne permettent le redimensionnement qu'à l'aide d'un seul paramètre.

Un code HTML qui peut être utilisé pour gérer cette situation, en conjonction avec Ajax pour la récupération de contenu, est le suivant :

<code class="html"><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></code>

Après avoir expérimenté diverses solutions, le code suivant s'est avéré efficace pour redimensionner dynamiquement le modal en fonction de son contenu :

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

Ce code garantit que la boîte de dialogue du modal est positionnée de manière relative, affichée sous forme de tableau , dispose d'un défilement vertical et horizontal automatique et ajuste automatiquement sa largeur en fonction du contenu du modal. La largeur minimale de 300 px est définie pour éviter que le modal ne devienne trop étroit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!