내가 크기 설정 부트 스트랩 모달이 크기

Question

부트 스트랩 모달 :

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

나는이 PHP에 POST 요청을하기 전에 모달의 크기 (실제로 폭)을 결정 할 수 있도록하려면를 프로그램은 모달을 표시하기 전에 일부 동적 내용을 표시합니다. 누구든지이 정보를 얻는 방법을 알고 있습니까?

Answer 1

Javascript를 사용하여 요소의 실제 크기를 원하면 JQuery에는 .width() 및 .height() 함수가 내장되어 있습니다. 그런 다음

<div id="my_modal" class="modal-dialog modal-lg" data-size="modal-lg"> 

자바 스크립트를 통해 액세스 :

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); 

희망 도움이 나는 쉽게 액세스에 대한 당신이 액세스하려는 넣다 부트 스트랩 클래스가있는 data- 속성과 ID를 추가 할 <div> 수정 !

Answer 2

나는 또한 모달 클래스뿐만 아니라 전체 모달의 너비 또는 높이를 찾아 내려고이 솔루션을 발견했습니다. 이 접근법을 추가해야하지만, 모달의 너비와 높이는 이후에만 으로 표시됩니다.

가 나는 전에이 사용자가 열려면 클릭 전에 기본 으로 숨겨져 있기 때문에이 표시되는 모달 의 정확한 폭과 높이를 얻을 수 아니라고 생각합니다. style="display: none;은 부트 스트랩 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 모달. 이 버그 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에 익숙하지 않기 때문에 실제로이 코드를 작성하는 데 더 우수하거나 더 세련된 방법이있을 수 있습니다. 그러나이 단계에서 어떻게해야할지 모르겠습니다. 그럼에도 불구하고 나는 여기에 제공된 정보가 당신에게 도움이 될 것이라고 생각합니다.