Como redimensionar o modal Bootstrap do Twitter dinamicamente com base no conteúdo

Tenho um banco de dados que contém diversos tipos de dados, como vídeos do Youtube, vídeos do Vimeo, texto, imagens do Imgur, etc. Todos eles têm diferentes alturas e larguras. Tudo o que encontrei ao pesquisar na Internet foi alterar o tamanho para apenas um parâmetro. Tem que ser igual ao conteúdo do pop-up.

Este é o meu código HTML. Eu também uso Ajax para chamar o conteúdo.

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

Como seu conteúdo deve ser dinâmico, você pode definir as propriedades css do modal dinamicamente no showevento do modal, que redimensionará o modal substituindo suas especificações padrão. O motivo de ser bootstrap aplica-se a altura máxima ao corpo modal com a regra css conforme abaixo:

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

Portanto, você pode adicionar estilos embutidos dinamicamente usando o cssmétodo jquery :

Para versões mais recentes do uso de bootstrap 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%'
       });
});

Para versões mais antigas do uso de bootstrap show

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

ou use uma regra css para substituir:

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

e adicione esta classe autoModalaos seus modais de destino.

Altere o conteúdo dinamicamente no fiddle, você verá o modal sendo redimensionado de acordo. Demo

A versão mais recente do bootstrap consulte o disponível event names.

• show.bs.modal Este evento é disparado imediatamente quando o método show instance é chamado. Se causado por um clique, o elemento clicado fica disponível como a propriedade relatedTarget do evento.
• mostrado.bs.modal Este evento é disparado quando o modal torna -se visível para o usuário (irá aguardar a conclusão das transições CSS). Se causado por um clique, o elemento clicado fica disponível como a propriedade relatedTarget do evento.
• hide.bs.modal Este evento é disparado imediatamente quando o método de instância ocultar é chamado.
• hidden.bs.modal Este evento é disparado quando o modal termina de ser escondido do usuário (irá aguardar a conclusão das transições CSS).
• carregado.bs.modal Este evento é disparado quando o modal carrega o conteúdo usando a opção remota.

Versão mais antiga do bootstrap modal events compatível.

• Show - Este evento é disparado imediatamente quando o método de instância show é chamado.
• mostrado - Este evento é disparado quando o modal torna-se visível para o usuário (irá aguardar a conclusão das transições css).
• hide - Este evento é disparado imediatamente quando o método de instância hide é chamado.
• oculto - Este evento é disparado quando o modal termina de ser oculto do usuário (irá aguardar a conclusão das transições css).

Isso funcionou para mim, nenhuma das opções acima funcionou.

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

Não consegui que a resposta do PSL funcionasse para mim, então descobri que tudo o que tenho a fazer é definir o div que contém o conteúdo modal style="display: table;". O próprio conteúdo modal diz quão grande ele deseja ser e o modal o acomoda.

Há muitas maneiras de fazer isso se você quiser escrever css, então adicione o seguinte

.modal-dialog{
  display: table
}

Caso você queira adicionar inline

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

Não adicione display:table;à classe de conteúdo modal. ele fez seu trabalho, mas preparou seu modal para um tamanho grande, veja as imagens a seguir. a primeira imagem é se você adicionar estilo ao diálogo modal, se você adicionar estilo ao conteúdo modal. parece disposto.

para bootstrap 3 use como

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

Css simples funciona para mim

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

Eu simplesmente substituo o css:

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

definido width:fit-contentno div modal.

Você pode fazer isso se usar o plug-in de diálogo jquery de gijgo.com e definir a largura como automática.

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

Você também pode permitir que os usuários controlem o tamanho se definir redimensionável como verdadeiro. Você pode ver uma demonstração sobre isso em http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Uma solução CSS simples que centralizará vertical e horizontalmente o modal:

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

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

Para Bootstrap 2, ajuste automaticamente a altura do modelo dinamicamente

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

Eu tive o mesmo problema com o bootstrap 3 e a altura do div do corpo modal não querendo ser maior que 442 px. Este foi todo o css necessário para corrigi-lo no meu caso:

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

A minha solução foi apenas adicionar o estilo abaixo. <div class="modal-body" style="clear: both;overflow: hidden;">

No Bootstrap 4 - tem um estilo de:

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

então, se você está procurando redimensionar a largura modal para um pouco mais de largura, sugiro usar isso em seu css, por exemplo:

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

Observe que a configuração width: 87vw;não substituirá a do bootstrap max-width: 500px;.

Minha pesquisa me trouxe até aqui, então poderia muito bem adicionar meus dois centavos de ideia. Se você estiver usando o modal Bootstrap do Twitter amigável do Monkey , você pode fazer algo assim:

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

Espero que isto ajude.