it-swarm-pt.tech

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

Eu tenho conteúdo de banco de dados que tem diferentes tipos de dados, como vídeos do Youtube, vídeos do Vimeo, texto, imagens Imgur, etc. Todos eles têm diferentes alturas e larguras. Tudo o que encontrei enquanto pesquiso na Internet está mudando o tamanho para apenas um parâmetro. Tem que ser o mesmo que o conteúdo no pop-up. 

Este é o meu código HTML. Eu também uso o 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> 
89
Erdem Ece

Como seu conteúdo deve ser dinâmico, você pode definir as propriedades css do modal dinamicamente no evento show do modal, o qual redimensionará o modal, sobrepondo suas especificações padrão. Razão sendo bootstrap aplica um max-height ao corpo modal com a regra css como abaixo:

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

Então você pode adicionar estilos inline dinamicamente usando o método jquery css:

Para versões mais recentes do bootstrap use 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 bootstrap use 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 autoModal aos seus modais de destino.

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

Versão mais recente do bootstrap veja o disponível event names .

  • show.bs.modal Esse evento é acionado imediatamente quando o método da instância de show é chamado. Se causado por um clique, o elemento clicado estará disponível como a propriedade relatedTarget do evento.
  • shown.bs.modal Este evento é disparado quando o modal foi tornado visível para o usuário (aguardará a conclusão das transições CSS). Se causado por um clique, o elemento clicado estará disponível como a propriedade relatedTarget do evento.
  • hide.bs.modal Este evento é disparado imediatamente quando o método hide da instância é chamado.
  • hidden.bs.modal Este evento é acionado quando o modal está sendo ocultado do usuário (aguardará a conclusão das transições CSS).
  • loaded.bs.modal Este evento é acionado quando o modal carrega conteúdo usando a opção remota.

Versão mais antiga do bootstrap modal events suportado.

  • Show - Este evento é disparado imediatamente quando o método da instância de show é chamado.
  • mostrado - Este evento é acionado quando o modal foi tornado visível para o usuário (esperará que as transições CSS sejam concluídas).
  • hide - Este evento é disparado imediatamente quando o método hide da instância é chamado.
  • hidden - Este evento é acionado quando o modal está sendo ocultado do usuário (esperará que as transições css sejam concluídas).
105
PSL

Isso funcionou para mim, nenhum dos acima funcionou.

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

Eu não consegui obter a resposta da PSL trabalhando para mim, então achei que tudo o que tenho a fazer é definir o div segurando o conteúdo modal com style="display: table;". O conteúdo modal em si diz o quão grande ele quer ser e o modal acomoda-o.

20
Luminous

para bootstrap 3 usar como

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

Há muitas maneiras de fazer isso, se você quiser escrever css, em seguida, adicione seguinte

.modal-dialog{
  display: table
}

No caso, se você quiser 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 o seu trabalho, mas disposição seu modal para tamanho grande ver screenshots seguinte. primeira imagem é se você adicionar estilo ao modal-dialog In case if you add style to modal-dialog se você adicionar estilo ao conteúdo modal. parece disposto. enter image description here

6
waqas ali

Css simples funciona para mim 

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

Eu simplesmente sobrescrevo o css:

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

Você pode fazer isso se usar o plugin jquery dialog de gijgo.com e definir a largura como 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>

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

1
Atanas Atanasov

Uma solução CSS simples que centraliza o modal na vertical e na horizontal:

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

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

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

0
Furquan

defina width:fit-content no div modal.

0
Subhashis Pal

Para Bootstrap 2 Ajuste automático da 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;');
  });
0
SudarP

A partir do Bootstrap 4 - tem um estilo de:

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

então se você está querendo redimensionar o modal width para uma largura maior, eu sugiro usar isso no seu css, por exemplo:

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

Nota essa configuração width: 87vw; não irá sobrescrever o max-width: 500px; do bootstrap.

0
Zulkifil

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

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