自举模态拟合宽度和中心水平方向

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>

小提琴

如果页面宽度发生变化，我希望模态宽度是顶部横幅的宽度(加上一些空白)，模态要居中，宽度/中心要保持不变。

谢谢!

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

请参阅小提琴

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

    });

});

但是，您会注意到，模式从默认大小开始。