如何获得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-具有引导类的属性（以防您想要访问它）和一个 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);

希望有帮助！