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

希望有所幫助！