Як змінити розмір Twitter Bootstrap модально динамічно на основі вмісту

У мене є вміст бази даних, який містить різні типи даних, такі як відео Youtube, відео Vimeo, текст, зображення Imgur тощо. Всі вони мають різну висоту та ширину. Все, що я знайшов під час пошуку в Інтернеті, - це зміна розміру лише на один параметр. Він повинен бути таким же, як вміст у спливаючому вікні.

Це мій HTML-код. Я також використовую Ajax для виклику вмісту.

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

Оскільки ваш вміст повинен бути динамічним, ви можете встановити властивості css модалу динамічно на showвипадок модалу, який змінить розмір модалу, замінюючи його специфікації за замовчуванням. Причина завантажувальної програми застосовує максимальну висоту до модального тіла з правилом css, як показано нижче:

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

Таким чином, ви можете динамічно додавати вбудовані стилі, використовуючи cssметод jquery :

Для новіших версій використання завантажувального пристрою 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%'
       });
});

Для старих версій завантажувального пристрою show

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

або використовувати правило css, щоб перекрити:

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

і додайте цей клас autoModalдо своїх цільових модалів.

Змінюйте вміст динамічно у скрипці, ви побачите, як модифікуються відповідно зміни розміру. Demo

Більш нову версію завантажувального пристрою див. У доступній event names.

• show.bs.modal Ця подія запускається негайно, коли викликається метод show instance. Якщо викликано клацанням, клацнув елемент доступний як пов'язане властивість події події.
• показано.bs.modal Ця подія запускається, коли модал стане видимим для користувача (буде чекати завершення переходів CSS). Якщо викликано клацанням, клацнув елемент доступний як пов'язане властивість події події.
• hid.bs.modal Ця подія запускається негайно після виклику методу приховати примірник.
• hidden.bs.modal Ця подія запускається, коли модаль закінчено приховати від користувача (буде чекати завершення переходів CSS).
• load.bs.modal Ця подія запускається, коли модал завантажив вміст за допомогою віддаленої опції.

Старіша версія завантажувальної програми modal events підтримується.

• Показати - ця подія запускається негайно під час виклику методу show instance.
• показано - Ця подія запускається, коли модал стає видимим для користувача (чекатиме завершення переходів css).
• сховати - Ця подія запускається негайно, коли викликається метод примірника приховування.
• приховано - ця подія запускається, коли модаль закінчено приховати від користувача (буде чекати завершення переходів css).

Це працювало для мене, жодне з вищезазначеного не працювало.

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

Я не міг змусити відповідь PSL працювати на мене, тому я знайшов, що все, що мені потрібно зробити, це встановити div, на якому міститься модальний вміст style="display: table;". Сам модальний зміст говорить про те, наскільки великим він хоче бути, і модальний вміст у ньому.

Існує багато способів зробити це, якщо ви хочете написати css, то додайте наступний

.modal-dialog{
  display: table
}

У випадку, якщо ви хочете додати Inline

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

Не додавати display:table;до класу модального контенту. вона зробила вашу роботу, але розмістіть свій модальний режим для великих розмірів, див. наступні знімки екрана. Перше зображення - якщо ви додасте стиль до модального діалогу, якщо ви додаєте стиль до модального контенту. це виглядає розчленовано.

для завантажувального пристрою 3 використовуйте як

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

Проста робота Css для мене

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

Я просто перекриваю css:

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

встановити width:fit-contentмодальний діл.

Це можна зробити, якщо ви користуєтеся плагіном діалогу jquery від gijgo.com і встановите ширину для автоматичного.

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

Ви також можете дозволити користувачам контролювати розмір, якщо ви встановили зміну на "true". Демонстрацію про це можна переглянути на веб- сторінці http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Просте CSS-рішення, яке вертикально і горизонтально буде центрувати модал:

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

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

Для Bootstrap 2 Автоматично регулюйте висоту моделі динамічно

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

У мене була така ж проблема з завантажувальним пристроєм 3 і висота поділу модального тіла, не бажаючи бути більше 442 пікселів. Це було все необхідне CSS, щоб виправити це в моєму випадку:

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

Моє рішення було просто додати нижче стиль. <div class="modal-body" style="clear: both;overflow: hidden;">

Станом на Bootstrap 4 - він має стиль:

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

тому якщо ви хочете змінити розмір модальної ширини на деяку ширину більше, я б запропонував використовувати це у своєму css, наприклад:

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

Зверніть увагу, що налаштування width: 87vw;не буде заміняти завантажувальну max-width: 500px;.

Мій пошук привів мене сюди, так що, можливо, також додадуться мої два центи, які варті ідеї. Якщо ви використовуєте дружній модаль для мотивації Twitter Bootstrap, ви можете зробити щось подібне:

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

Сподіваюся, це допомагає.