如何获得 bootstrap 模态大小

Question

我有一个 bootstrap 模态框，其大小设置为：

<div class="modal-dialog modal-lg">

我希望能够在向 PHP 程序发出 post 请求以在显示模态之前显示一些动态内容之前确定模态的大小（实际宽度）。有谁知道如何获取这些信息？

Answer 1

如果您想要使用 Javascript 的元素的实际尺寸，JQuery 具有内置的 .width() 和 .height() 函数。我修改了你的 <div> 以添加一个 data- 属性，该属性具有 bootstrap class 以防你想要访问它和一个 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);

希望对您有所帮助！

Answer 2

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

我认为无法在显示模态之前获得正确的宽度和高度，因为默认情况下它是隐藏的之前用户点击打开。 style="display: none; 作为 Bootstrap 3.3.2.

模态 class 下的内联样式

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

    // 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 模态时可能会遇到。如果您想摆脱这个错误 Open modal is shifting body content to the left #9855 concerning the modal position and given this bug it still not fixed Modify scrollbar check, stop static nav shift #13103 您可以使用这种方法，无论您是否显示垂直滚动条都有效。

参考：Bootstrap 3.3.2 Center modal on all viewport sizes with or without vertical scrollbar

$('#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 的新手，因此可能有更好或更优雅的方法来实际编写代码，尽管我现阶段还不知道该怎么做。尽管如此，我认为这里提供的信息可能对您有所帮助。

如何获得 bootstrap 模态大小

How to get bootstrap modal size

javascript

php

twitter-bootstrap-3