如何获取引导模式大小

我也一直在尝试找到整个模态以及模态类的宽度或高度，并找到了这个解决方案。尽管我必须补充一点，使用这种方法，模态的宽度和高度只有在加载后才能找到。

获得正确的模态宽度和高度，因为在用户单击打开它之前默认情况下它是隐藏的。 style="display: none; Bootstrap 3.3.2 中模态类下的内联样式。

但是，如果您想在显示模态后获得正确的宽度和高度，则可以使用此方法。

    // once the modal has loaded all calculations can start
    // since the modal is hidden before it is loaded there are
    // no dimesions that can be calculated unfortunately
    $('#myModal').on('shown.bs.modal', function () {

        // get the viewport height
        var viewportHeight = $(window).height();
        console.log ('viewportHeight = ' + viewportHeight);

        // get the viewport width
        var viewportWidth = $(window).width();
        console.log ('viewportWidth = ' + viewportWidth);

        // get the .modal-dialog height and width
        // here the .outerHeight() method has to be used instead of the .height() method
        // see https://api.jquery.com/outerwidth/ and
        // https://api.jquery.com/outerheight/ for reference
        // also the .find() method HAS to be used, otherwise jQuery won't find
        // the correct element, this is why you got strange values beforehand
        var modalDialogHeight = $(this).find('.modal-dialog').outerHeight(true);
        console.log ('modalDialogHeight = ' + modalDialogHeight);
        var modalDialogWidth = $(this).find('.modal-dialog').outerWidth(true);
        console.log ('modalDialogWidth = ' + modalDialogWidth);

        // I have included a simple function to log the width and height
        // of the modal when the browser window is being resized
        var modalContentWidthHeight = function () {
            var modalContentWidth = $('#myModal').find('.modal-content').outerWidth(true);
                console.log ('modalContentWidth = ' + modalContentWidth);
            var modalContentHeight = $('#myModal').find('.modal-content').outerHeight(true);
                console.log ('modalContentHeight = ' + modalContentHeight);     
            };
        $(window).resize(modalContentWidthHeight);
    });

我希望上面的代码以某种方式帮助您弄清楚模态尺寸，并且您可以从那里获取它。

另一件真正困扰我的事情是您在使用 Bootstrap 3.3.2 模式时可能会遇到的。如果您想摆脱此错误 打开模态正在将身体内容向左移动 #9855 关于模态位置，鉴于此错误，它仍未修复 修改滚动条检查，停止静态导航移位 #13103 无论您是否显示垂直滚动条，您都可以使用此方法。

参考：引导 3.3.2 所有视口大小上的中心模式，带或不带垂直滚动条

$('#myModal').on('shown.bs.modal', function () {        
// meassure the padding-right given by BS and apply it as padding-left to the modal
// like this equal padding on either side of the modal is given regardless of media query
var modalPaddingRight = $('#myModal').css('padding-right');
console.log ('modalPaddingRight = ' + modalPaddingRight);

// apply the padding value from the right to the left
$('#myModal').css('padding-left', modalPaddingRight);
console.log ( 
        'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
        ' modalPaddingRight = ' + $('#myModal').css('padding-right')
        );

// apply equal padding on window resize
var modalPaddingLeft = function () {
    var modalPaddingRight = $('#myModal').css('padding-right');
    console.log ('modalPaddingRight = ' + modalPaddingRight);
    $('#myModal').css('padding-left', modalPaddingRight);
    console.log ( 
        'modalPaddingLeft = ' + $('#myModal').css('padding-left') +
        'modalPaddingRight = ' + $('#myModal').css('padding-right')
        );
};
$(window).resize(modalPaddingLeft);
});

我希望这个答案中的一些可以帮助你。由于我是jQuery的新手，因此可能会有更好或更优雅的方法来实际编写代码，尽管现阶段我不知道如何编码。尽管如此，我认为这里提供的信息可能对您有所帮助。

如果你想使用Javascript来获得元素的实际尺寸，JQuery具有内置的.width()和.height()函数。我修改了您的<div>以添加一个 data- 属性，该属性具有 bootstrap 类，以防您想要访问该属性，以及一个 ID 以便于访问：

<div id="my_modal" class="modal-dialog modal-lg" data-size="modal-lg">

然后通过Javascript访问它：

var width = $("#my_modal").width();
var height = $("#my_modal").height();
var size = $("#my_modal").attr("data-size");
console.log("Width Is: " + width + " and Height Is:" + height + "and Size Is:" + size);

希望对您有所帮助！