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

101

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>
javascript  jquery  html  css  twitter-bootstrap 
— Erdem Ece
소스

답변:

112

콘텐츠는 동적이어야하므로 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 전환이 완료 될 때까지 기다립니다).
— PSL
소스
#modal을 .moda-body와 동일하게 변경해야 이제 완벽하게 작동합니다. 대단히 감사합니다!
— Erdem Ece 2013
8
@PSL, +1에 대한 답변과 나를 kbd 에 소개합니다 .
— Rolando Isidoro 2013 년
쇼 이벤트가 작동하지 않는 것 같습니다. 이 일 : $('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events
— joym8
+1 세부 사항 및 이전 및 새 수용. 이제 화면의 전체 너비를 채우지 않고 실제로 크기가 동적이었습니다.
— Luminous
@PSL on runtime 어떻게 모달의 너비를 조작 할 수 있습니까? JavaScript로 더 작게 또는 더 크게 만들 수 있습니까?
— Sredny M Casanova
119

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

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
— 아밋 샤
소스
2
@GreenAsJade는 다음 링크를 이해하는 데 도움이 될 수 있습니다. colintoh.com/blog/display-table-anti-hero iandevlin.com/blog/2013/06/css/css-stacking-with-display-table
— Amit Shah
1
@maheshreddy 환영합니다. 도움이된다면 +1 투표를 잊지 마세요. 다른 사람들이이 답변을 더 신뢰하고 시도 할 수 있습니다.
— 아 미트 샤
높이를 동적으로 설정하지만 이번에는 화면 왼쪽에 모달 대화 상자가 열립니다. 그것을 고치는 방법?
— Jack
1
그러나 이것은 반응 형 모바일 뷰에서는 작동하지 않습니다. 노트북 화면에서 꽤 잘 작동합니다.
— Chetan에
4
이것은 효과가 있었지만 모달의 의도하지 않은 영향이 더 이상 페이지의 수직 중앙에 있지 않습니다. 별거 아니지만 뭔가 언급 할 거라고 생각 했어요.
— John Allard
22

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

— 총명한
소스
5
PSL의 답변도 작동하지 않았습니다. (부트 스트랩의 Angular 버전을 사용했기 때문일 수 있습니다) 이것은 저에게 효과적이었습니다. 그냥이 스타일은 .modal-대화 클래스 1에 추가됩니다에
— user227353
나는 당신의 솔루션을 "modal-content"클래스로 갖는 div에 적용했습니다.
— Mehdi
10

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

.modal-dialog{
  display: table
}

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

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

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

— 와카 스 알리
소스
7

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

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
— user2678868
소스
4
이 hidden.bs.modal에 추가하면 모달이 닫힌 후에 실행됩니다. 모달이 트리거 될 때 show.bs.modal을 사용하여 부트 스트랩 3에서 실행하십시오.
— d3c0y
어떤 방식이나 형태로든 대화 상자의 크기를 어떻게 조정합니까? 모달 대화 상자가 숨겨 지거나 표시 될 때 트리거되는 콜백 함수입니다.
— user1438038
4

나를 위해 간단한 CSS 작업 

.modal-dialog { 
max-width : 100% ;
}
— 파스칼
소스
1

gijgo.com의 jquery 대화 상자 플러그인을 사용하고 너비를 자동으로 설정하면 그렇게 할 수 있습니다.

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>
스 니펫 확장

resizable을 true로 설정하면 사용자가 크기를 제어하도록 허용 할 수도 있습니다. http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable 에서 이에 대한 데모를 볼 수 있습니다.

— Atanas Atanasov
소스
1

모달을 수직 및 수평 중앙에 배치하는 간단한 CSS 솔루션 :

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
— 커크 로스
소스
0

Bootstrap 2의 경우 모델 높이를 동적으로 자동 조정

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });
— SudarP
소스
0

나는 부트 스트랩 3과 모달 바디 div의 높이가 442px보다 크기를 원하지 않는 동일한 문제가있었습니다. 이것은 내 경우에 수정하는 데 필요한 모든 CSS였습니다.

.modal-body {
    overflow-y: auto;
}
— 브렛 드레이크
소스
0

Mine Solution은 아래 스타일을 추가하는 것뿐이었습니다. <div class="modal-body" style="clear: both;overflow: hidden;">

— Furquan
소스
0

Bootstrap 4부터는 다음과 같은 스타일이 있습니다.

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

따라서 모달 너비를 약간 더 큰 너비 로 크기를 조정하려는 경우 예를 들어 CSS에서 이것을 사용하는 것이 좋습니다.

.modal-dialog { max-width: 87vw; }

참고 설정이 있음을 width: 87vw;부트 스트랩의 우선하지 않습니다 max-width: 500px;.

— 줄 키필
소스
0

내 검색이 나를 여기로 이끌었으므로 내 2 센트 가치의 아이디어를 추가하는 것이 좋습니다. Monkey 친화적 인 Twitter Bootstrap 모달 을 사용하는 경우 다음과 같이 할 수 있습니다.

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

도움이 되었기를 바랍니다.

— jpllosa
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.