如何获得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);

    });

我希望上面的代码以某种方式帮助你弄清楚模态尺寸，你可以从那里拿走它。

另一件事，真的烦我，你可能会使用引导3.3.2模式时遇到的问题。 如果你想摆脱这个错误打开模态正在将身体内容转移到左侧＃9855有关模态位置并给出此错误它仍然没有修复修改滚动条检查，停止静态导航班次＃13103你可以使用这种方法，无论如何如果您显示或不显示垂直滚动条。

参考： Bootstrap 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的新手，可能有更好或更优雅的方法来实际编写代码，尽管我不知道在这个阶段如何。 不过，我认为这里给出的信息对您有所帮助。

Answer 2

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

希望有所帮助！