Come ridimensionare il Bootstrap di Twitter in modo dinamico in base al contenuto

Possiedo contenuti di database che hanno diversi tipi di dati, come video Youtube, video Vimeo, testo, immagini Imgur, ecc. Tutti hanno altezze e larghezze differenti. Tutto quello che ho trovato durante la ricerca in Internet è stato modificare la dimensione su un solo parametro. Deve essere lo stesso del contenuto nel popup.

Questo è il mio codice HTML. Uso anche Ajax per chiamare il contenuto.

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

Poiché il contenuto deve essere dinamico, è possibile impostare dinamicamente le proprietà CSS del modale in showcaso di modale che ridimensionerà il modale sovrascrivendo le sue specifiche predefinite. Il motivo per cui bootstrap applica un'altezza massima al corpo modale con la regola CSS come di seguito:

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

Quindi puoi aggiungere stili in linea dinamicamente usando il cssmetodo jquery :

Per le versioni più recenti di bootstrap utilizzare 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%'
       });
});

Per le versioni precedenti di bootstrap utilizzare show

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

o usa una regola CSS per sovrascrivere:

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

e aggiungi questa classe autoModalalle tue modali di destinazione.

Cambia il contenuto dinamicamente nel violino, vedrai il modale ridimensionato di conseguenza. Demo

La versione più recente di bootstrap vede la disponibilità event names.

• show.bs.modal Questo evento si attiva immediatamente quando viene chiamato il metodo dell'istanza show. Se causato da un clic, l'elemento cliccato è disponibile come proprietà relatedTarget dell'evento.
• mostrato.bs.modal Questo evento viene generato quando il modale è stato reso visibile all'utente (aspetterà il completamento delle transizioni CSS). Se causato da un clic, l'elemento cliccato è disponibile come proprietà relatedTarget dell'evento.
• hide.bs.modal Questo evento viene generato immediatamente quando viene chiamato il metodo di istanza hide.
• hidden.bs.modal Questo evento viene generato quando il modal ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
• load.bs.modal Questo evento viene generato quando il modal ha caricato il contenuto utilizzando l'opzione remote.

Versione precedente di bootstrap modal events supportata.

• Show : questo evento si attiva immediatamente quando viene chiamato il metodo dell'istanza show.
• mostrato - Questo evento viene generato quando il modale è stato reso visibile all'utente (attenderà il completamento delle transizioni css).
• hide : questo evento viene generato immediatamente quando il metodo di istanza hide è stato chiamato.
• nascosto : questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni css).

Questo ha funzionato per me, nessuno dei precedenti ha funzionato.

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

Non sono riuscito a far funzionare la risposta di PSL per me, quindi ho scoperto che tutto ciò che devo fare è impostare il div con il contenuto modale style="display: table;". Il contenuto modale stesso dice quanto grande vuole essere e il modale lo accoglie.

Ci sono molti modi per farlo se vuoi scrivere css quindi aggiungi quanto segue

.modal-dialog{
  display: table
}

Nel caso in cui desideri aggiungere inline

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

Non aggiungere display:table;alla classe di contenuto modale. ha fatto il tuo lavoro ma disponi il tuo modale per grandi dimensioni vedi schermate seguenti. la prima immagine è se aggiungi stile alla finestra di dialogo modale se aggiungi stile al contenuto modale. sembra disposto.

per bootstrap 3 usa come

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

Il semplice CSS funziona per me

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

Sovrascrivo semplicemente il css:

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

impostato width:fit-contentsul div modale.

Puoi farlo se usi il plugin jquery dialog da gijgo.com e imposti la larghezza su 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>

Puoi anche consentire agli utenti di controllare le dimensioni se imposti ridimensionabile su true. Puoi vedere una demo su questo su http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Una semplice soluzione CSS che centrerà verticalmente e orizzontalmente il modale:

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

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

Per Bootstrap 2 regola automaticamente l'altezza del modello in modo dinamico

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

Ho avuto lo stesso problema con bootstrap 3 e l'altezza del div corpo modale non voleva essere maggiore di 442px. Questo era tutto il CSS necessario per risolverlo nel mio caso:

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

La mia soluzione era solo per aggiungere sotto lo stile. <div class="modal-body" style="clear: both;overflow: hidden;">

A partire da Bootstrap 4 - ha uno stile di:

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

quindi se stai cercando di ridimensionare la larghezza modale a una larghezza maggiore, ti suggerirei di usarlo nel tuo css, ad esempio:

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

Nota che l'impostazione width: 87vw;non sovrascriverà quella di bootstrap max-width: 500px;.

La mia ricerca mi ha portato qui, quindi potrei anche aggiungere la mia idea di due centesimi. Se stai usando il modal Bootstrap di Twitter adatto alle scimmie, puoi fare qualcosa del genere:

    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();

Spero che questo ti aiuti.