Jak dynamicznie zmieniać rozmiar Twitter Bootstrap modalnie na podstawie treści

Mam zawartość bazy danych, która zawiera różne typy danych, takie jak filmy z YouTube, filmy Vimeo, tekst, zdjęcia Imgur itp. Wszystkie mają różne wysokości i szerokości. Wszystko, co znalazłem podczas wyszukiwania w Internecie, to zmiana rozmiaru tylko na jeden parametr. Musi być taka sama jak zawartość wyskakującego okienka.

To jest mój kod HTML. Używam również Ajax do wywoływania zawartości.

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

Ponieważ treść musi być dynamiczna, możesz ustawić właściwości css modalu dynamicznie w showprzypadku zdarzenia modalnego, co spowoduje zmianę rozmiaru modalu, nadpisując jego domyślne specyfikacje. Powód bycia bootstrapem stosuje maksymalną wysokość do ciała modalnego z regułą css jak poniżej:

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

Możesz więc dynamicznie dodawać style wbudowane za pomocą cssmetody jquery :

W przypadku nowszych wersji programu bootstrap użyj 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%'
       });
});

W przypadku starszych wersji używaj bootstrap show

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

lub użyj reguły css, aby zastąpić:

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

i dodaj tę klasę autoModaldo docelowych modali.

Zmieniaj zawartość dynamicznie na skrzypcach, zobaczysz, że modal zostanie odpowiednio zmieniony. Demo

Nowsza wersja bootstrapa zobacz dostępne event names.

• show.bs.modal To zdarzenie jest wywoływane natychmiast po wywołaniu metody instancji show. Jeśli jest spowodowany kliknięciem, kliknięty element jest dostępny jako właściwość relatedTarget zdarzenia.
• shown.bs.modal To zdarzenie jest wywoływane, gdy modal jest widoczny dla użytkownika (będzie czekał na zakończenie przejść CSS). Jeśli jest spowodowany kliknięciem, kliknięty element jest dostępny jako właściwość relatedTarget zdarzenia.
• hide.bs.modal To zdarzenie jest wywoływane natychmiast po wywołaniu metody hide instance.
• hidden.bs.modal To zdarzenie jest wywoływane po zakończeniu ukrywania modalu przed użytkownikiem (będzie czekał na zakończenie przejść CSS).
• load.bs.modal To zdarzenie jest wywoływane, gdy modal załadował zawartość za pomocą opcji remote.

modal events Obsługiwana jest starsza wersja bootstrapu .

• Show - to zdarzenie jest wywoływane natychmiast po wywołaniu metody wystąpienia show.
• pokazane - to zdarzenie jest uruchamiane, gdy modal jest widoczny dla użytkownika (będzie czekał na zakończenie przejść CSS).
• hide - To zdarzenie jest wywoływane natychmiast po wywołaniu metody hide instance.
• ukryte - to zdarzenie jest wywoływane, gdy modal przestanie być ukrywany przed użytkownikiem (będzie czekał na zakończenie przejść css).

To zadziałało dla mnie, żadne z powyższych nie zadziałało.

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

Nie mogłem uzyskać odpowiedzi PSL, która działa dla mnie, więc stwierdziłem, że wszystko, co muszę zrobić, to ustawić div przechowujący zawartość modalną style="display: table;". Sama treść modalna mówi, jak duży chce być, a modal to dostosowuje.

Istnieje wiele sposobów, aby to zrobić, jeśli chcesz napisać css, a następnie dodać następujące

.modal-dialog{
  display: table
}

W przypadku, gdy chcesz dodać inline

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

Nie dodawaj display:table;do klasy zawartości modalnej. to wykonało twoją pracę, ale ustaw swój modal dla dużego rozmiaru, patrz poniższe zrzuty ekranu. pierwszy obraz jest, jeśli dodasz styl do okna dialogowego modalnego, jeśli dodasz styl do zawartości modalnej. wygląda na usposobioną.

do używania bootstrap 3 jak

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

Prosty CSS działa dla mnie

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

Po prostu nadpisuję css:

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

ustawiony width:fit-contentna modalnym div.

Możesz to zrobić, jeśli używasz wtyczki okna dialogowego jquery z gijgo.com i ustawisz szerokość na 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>

Możesz także zezwolić użytkownikom na kontrolowanie rozmiaru, jeśli ustawisz resizable na true. Możesz zobaczyć demo na ten temat pod adresem http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Proste rozwiązanie CSS, które wyśrodkuje modalnie w pionie i poziomie:

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

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

Dla Bootstrap 2 Automatyczna dynamiczna regulacja wysokości modelu

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

Miałem ten sam problem z bootstrapem 3 i wysokością elementu div modalnego ciała, która nie chciała być większa niż 442px. To wszystko, czego potrzebowałem, by to naprawić w moim przypadku:

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

Mine Solution miało po prostu dodać poniższy styl. <div class="modal-body" style="clear: both;overflow: hidden;">

Od Bootstrap 4 - ma styl:

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

więc jeśli chcesz zmienić rozmiar szerokości modalnej na większą, sugerowałbym użycie tego w twoim css na przykład:

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

Zauważ, że ustawienie width: 87vw;nie zastąpi opcji bootstrap max-width: 500px;.

Moje poszukiwania doprowadziły mnie tutaj, więc równie dobrze mogę dodać mój pomysł wart dwa centy. Jeśli korzystasz z modalu Monkey Friendly Twitter Bootstrap , możesz zrobić coś takiego:

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

Mam nadzieję że to pomoże.