[javascript] 콘텐츠에 따라 Twitter Bootstrap 모달의 크기를 동적으로 조정하는 방법

Youtube 비디오, Vimeo 비디오, 텍스트, Imgur 사진 등과 같은 다양한 유형의 데이터가있는 데이터베이스 콘텐츠가 있습니다. 모두 높이와 너비가 다릅니다. 인터넷을 검색하는 동안 내가 찾은 것은 크기를 하나의 매개 변수로만 변경하는 것뿐입니다. 팝업의 내용과 동일해야합니다.

이것은 내 HTML 코드입니다. 또한 Ajax를 사용하여 콘텐츠를 호출합니다.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div>

답변

콘텐츠는 동적이어야하므로 show기본 사양을 재정의하는 모달의 크기를 조정하는 모달의 이벤트 에서 모달의 CSS 속성을 동적으로 설정할 수 있습니다 . 부트 스트랩이되는 이유는 아래와 같이 CSS 규칙을 사용하여 모달 본문에 최대 높이를 적용합니다.

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

따라서 jquery css메서드를 사용하여 인라인 스타일을 동적으로 추가 할 수 있습니다 .

최신 버전의 부트 스트랩 사용 show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

이전 버전의 부트 스트랩 사용 show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

또는 css 규칙을 사용하여 재정의 :

.autoModal.modal .modal-body{
    max-height: 100%;
}

이 클래스 autoModal를 대상 모달에 추가하십시오 .

바이올린에서 콘텐츠를 동적으로 변경하면 그에 따라 모달 크기가 조정되는 것을 볼 수 있습니다. Demo

최신 버전의 부트 스트랩은 사용 가능한 event names.

show.bs.modal 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다. 클릭에 의해 발생한 경우 클릭 된 요소는 이벤트의 relatedTarget 속성으로 사용할 수 있습니다.
shown.bs.modal 이 이벤트는 모달이 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). 클릭에 의해 발생한 경우 클릭 된 요소는 이벤트의 relatedTarget 속성으로 사용할 수 있습니다.
hide.bs.modal 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다.
hidden.bs.modal 이 이벤트는 모달이 사용자에게 숨겨 졌을 때 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다).
loaded.bs.modal 이 이벤트는 모달이 원격 옵션을 사용하여 콘텐츠를로드하면 시작됩니다.

이전 버전의 부트 스트랩이 modal events 지원됩니다.

Show- 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다.
shown- 이 이벤트는 모달이 사용자에게 표시되면 시작됩니다 (css 전환이 완료 될 때까지 기다립니다).
hide- 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다.
hidden- 이 이벤트는 모달이 사용자에게 숨겨 졌을 때 시작됩니다 (css 전환이 완료 될 때까지 기다립니다).

답변

이것은 나를 위해 일했지만 위의 어느 것도 효과가 없었습니다.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

답변

나는 나를 위해 작동하는 PSL의 대답을 얻을 수 없었기 때문에 내가해야 할 일은 모달 콘텐츠를 보유하는 div를 style="display: table;". 모달 콘텐츠 자체는 원하는 크기를 나타내며 모달은이를 수용합니다.

답변

CSS를 작성하고 다음을 추가하려면 여러 가지 방법이 있습니다.

.modal-dialog{
  display: table
}

인라인 추가를 원하시는 경우

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

display:table;모달 콘텐츠 클래스에 추가하지 마십시오 . 그것은 당신의 일을했지만 큰 크기에 대한 모달을 처리하려면 다음 스크린 샷을 참조하십시오. 첫 번째 이미지는
modal-content에 스타일을 추가하면 modal-dialog
에 스타일을 추가하는 경우입니다. 처분 된 것처럼 보입니다.

답변

부트 스트랩 3의 경우 다음과 같이 사용하십시오.

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

답변

나를 위해 간단한 CSS 작업

.modal-dialog {
max-width : 100% ;
}

답변

나는 단순히 CSS를 재정의합니다.

.modal-dialog {
    max-width: 1000px;
}