25.11.2024

Redimensionamento Dinâmico de Modais no Bootstrap

Resposta Rápida

Para ajustar o tamanho de um modal do Bootstrap com base em seu conteúdo, você pode usar estilos CSS aplicados à classe .modal-body. Também é possível usar jQuery para definir as propriedades max-height e overflow-y após o modal ser exibido:

$('#seuModal').on('shown.bs.modal', function () {
  var alturaDisponivel = $(window).height() - $(this).find('.modal-header').outerHeight() - $(this).find('.modal-footer').outerHeight() - 20;
  $(this).find('.modal-body').css('max-height', alturaDisponivel).css('overflow-y', 'auto');
});

Este script limita o espaço máximo que o modal pode ocupar, enquanto mantém o cabeçalho e o rodapé visíveis, eliminando a necessidade de barras de rolagem em todo o modal.

Aplicando uma Estratégia CSS para Ajuste de Tamanho

Para definir os parâmetros do tamanho da janela modal, use CSS:

.modal-dialog {
  display: table;
  position: relative;
  width: auto;
  min-width: seuTamanhoMinimo;
}

Se um manipulador de eventos do jQuery for aplicado para ocultar o modal, você pode adicionar algumas configurações adicionais:

$('#seuModal').on('hidden.bs.modal', function () {
  // Aqui você pode ajustar o modal após ele ser ocultado.
});

JavaScript - O Aliado do CSS

JavaScript é útil para calcular tamanhos de forma dinâmica.

function redimensionarModal() {
  var modalDialog = $('.modal-dialog');
  modalDialog.css('max-height', 'calc(100vh - 100px)');
  modalDialog.find('.modal-content').css('overflow-y', 'auto');
}
// Chamar a função redimensionarModal() ajustará dinamicamente o tamanho do modal.

Personalização para Diferentes Dispositivos

Variedade de Dispositivos

O modal deve ser exibido corretamente em vários dispositivos. Isso pode ser alcançado por meio de consultas de mídia:

@media (max-width: 768px) {
  .modal-dialog {
    width: 100%;
    max-width: none;
  }
}

Conteúdo Interativo: Prioridades Importam!

Elementos com tamanhos variáveis (formulários, controles deslizantes) requerem atenção especial para evitar comportamentos imprevisíveis.

Visualização

O modal responde ao peso de seu conteúdo, como um pião:

Conteúdo leve: [🪶🪶]
Conteúdo pesado: [📚📚]

Redimensionamento Suave: Cultivando Pixels

Adicione efeitos de transição suaves ao modal para uma melhor experiência visual:

.modal-dialog {
  transition: width 0.3s ease-in-out;
}

UX - Atenda às Expectativas do Usuário!

O manuseio cuidadoso de indicadores de carregamento e mensagens de progresso aprimorará a interação do usuário com os modais.

Recursos Úteis

1. Modal · Bootstrap - Instruções do Bootstrap para trabalhar com modais.
2. .css() | Documentação da API jQuery - Guia sobre como utilizar o jQuery para trabalhar com CSS.
3. Como Criar Modais com Bootstrap 5 - Tutorial Republic - Um guia para criar modais usando Bootstrap 5.
4. java - Como implementar parâmetros de inicialização específicos de ambiente na minha aplicação Tomcat - Stack Overflow - Discussão no Stack Overflow relacionada à configuração de conteúdo dinâmico.
5. EventTarget: método addEventListener() - Web APIs | MDN - Informações do MDN sobre métodos de manuseio de eventos em JavaScript.
6. Modais Bootstrap 4 - Tutorial da W3Schools sobre como criar modais no Bootstrap 4.

Video

Navigation