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

您需要处理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 });

    });

});

然而，你会注意到模态从它的默认大小开始。

Answer 2

这是一个全面的解决方案，保存原始宽度并使用它来计算显示的事件和doc调整大小的宽度和左边距百分比。最初隐藏对话框以防止闪烁效应。

<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

Bootstrap模态适合宽度和水平居中

2 个答案: