Bootstrap modal fit width и center horizontally

Question

Я видел решения для ограничения ширины модала до определенного процента страницы или определенного диапазона столбцов, но можно ли просто получить модальную форму для наилучшего соответствия - это использование минимальная ширина модального контента?

Я попытался добавить width: auto; без успеха.

См:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="width:auto"> 
    <div class="modal-dialog" style="width:auto"> 
    <div class="modal-content"> 
     <img src="http://pdf.buildasign.com/upload/images/templateImages/TC17819031-42-260-195-7357-11-SharedDesign.png"> 
     <br> 
     <p>hello</p> 
    </div> 
    </div> 
</div> 

jsfiddle

Я хотел бы модальную ширину, чтобы быть, что верхний баннер (плюс некоторый запас), модальный быть центрированными и ширины/центрированием, чтобы поддерживать себя если изменяется ширина страницы.

Спасибо!

Answer 1

Вот комплексное решение, сохраняющее исходную ширину и использующее его для расчета ширины и процента левого края при показанных событиях и изменении размера документа. Сначала скрыть диалог, чтобы предотвратить эффект мерцания.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch</button> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content" style="display:none;"> 
     <img src="http://pdf.buildasign.com/upload/images/templateImages/TC17819031-42-260-195-7357-11-SharedDesign.png"> 
     <br> 
     <p>hello</p> 
    </div> 
</div> 

function hCenterModals() { 
    function toP(n) { return (n * 100).toFixed() + '%'; } 

    $('.modal').each(function() { 
     var modalDialog = $(this).find('.modal-dialog'), 
      modalContent = $(this).find('.modal-content'); 

     // get/save minWidth to data (for resize) 
     var minWidth = modalDialog.data('minWidth'); 
     if (!minWidth) { 
      minWidth = modalContent.width(); 
      if (minWidth > 0) { 
       modalDialog.data('minWidth', minWidth); 
       console.log('saved ' + minWidth); 
      } else { 
       minWidth = 0; 
      } 
     } 

     if (minWidth>0 && modalDialog.is(':visible')) { 
      var widthFrac = minWidth/$(window).width(); 

      modalDialog.css({ 
       'width': toP(widthFrac), 
       'margin-left': toP((1 - widthFrac)/2) 
      }); 
     } 
    }); 
} 

$('#myModal').on('shown.bs.modal', function (e) { 
    hCenterModals(); 
    var modalContent = $(this).find('.modal-content'); 
    modalContent.show(); 
}); 

$(window).resize(hCenterModals).trigger("resize"); 

см jsfiddle

Answer 2

Вам нужно обработать shown.bs.modal событие, и изменить размер DIV на любой другой, например, так:

http://jsfiddle.net/vyw2zvfu/2/

$(function(){ 

    $('#myModal').on('shown.bs.modal', function(e){ 

     var width = $(this).find('.modal-content img').width(); 

     $(this).animate({ 'width': width+25 }); 

    }); 

}); 

Вы заметите, что модальный начинается его размер по умолчанию, однако ,