如何获得bootstrap模态大小

Question

我有一个bootstrap模式，其大小由：

设置

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

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

Answer 1

我也一直试图找到整个模态的宽度或高度以及模态类，并找到了这个解决方案。虽然我必须通过这种方法添加它，但模式的宽度和高度只有在 >之后才能找到。

我认为在显示模式之前无法获得模式的正确宽度和高度，因为默认情况下隐藏 用户点击后打开它。 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模式时，您可能遇到的另一件事 bugging 。如果你想摆脱这个关于模态位置的错误 Open modal is shifting body content to the left #9855 ，并且给出了这个错误，它仍然没有修复 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的新手，可能有更好或更优雅的方法来实际编写代码，尽管我不知道在这个阶段如何。不过，我认为这里给出的信息对你有帮助。

Answer 2

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

希望有所帮助！