[css] 부트 스트랩 3 모달 수직 위치 중심

이것은 두 가지 질문입니다.

모달의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?
모달이 화면 높이를 초과하는 경우에만 모달을 중앙에 배치하고 모달 본체에서 overflow : auto를 가질 수 있습니까?

나는 이것을 사용하려고 시도했다.

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

이것은 내용이 세로 화면 크기보다 훨씬 클 때 필요한 결과를 제공하지만 작은 모달 내용의 경우 거의 사용할 수 없습니다.

답변

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

그리고 약간의 .fade 클래스를 조정하여 가운데가 아닌 창의 상단 경계에 표시되도록하십시오.

답변

1. 모달의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?

~~높이를 선언하지 않고 Bootstrap 3 모달의 중심을 맞추려면 먼저 스타일 시트에 이것을 추가하여 Bootstrap CSS를 덮어 써야합니다.~~

~~.modal-dialog-center { /* Edited classname 10/03/2014 */ margin: 0; position: absolute; top: 50%; left: 50%; }~~

그러면 모달 대화 상자의 왼쪽 상단 모서리가 창의 중앙에 배치됩니다.

이 미디어 쿼리를 추가해야합니다. 그렇지 않으면 소형 장치에서 모달 여백이 잘못되었습니다.

@media (max-width: 767px) {
  .modal-dialog-center { /* Edited classname 10/03/2014 */
    width: 100%;
  }
}

이제 JavaScript로 위치를 조정해야합니다. 이를 위해 요소의 높이와 너비의 절반과 같은 음의 상단 및 왼쪽 여백을 제공합니다. 이 예제에서는 부트 스트랩과 함께 사용할 수 있으므로 jQuery를 사용합니다.

$('.modal').on('shown.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

업데이트 (01/10/2015) :

Finik의 답변 추가 . 미지의 센터링에 대한 크레딧 .

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

부정적인 마진이 맞습니까? 인라인 블록으로 추가 된 공간을 제거합니다. 이 공간은 모달이 페이지의 맨 아래 @media width <768px로 점프하게합니다.

2. 모달이 화면 높이를 초과하는 경우에만 모달이 가운데에 있고 모달 바디에 overflow : auto가있을 수 있습니까?

이것은 모달 바디에 overflow-y : auto 및 max-height를 제공함으로써 가능합니다. 제대로 작동하려면 조금 더 많은 작업이 필요합니다. 이것을 스타일 시트에 추가하는 것으로 시작하십시오.

~~.modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; }~~

jQuery를 다시 사용하여 창 높이를 얻고 모달 컨텐츠의 최대 높이를 먼저 설정합니다. 그런 다음 모달 헤더와 모달 바닥 글로 모달 내용을 빼서 모달 바디의 최대 높이를 설정해야합니다.

$('.modal').on('shown.bs.modal', function() {
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-content').css({
        'max-height': function () {
            return contentHeight;
        }
    });

    $(this).find('.modal-body').css({
        'max-height': function () {
            return (contentHeight - (headerHeight + footerHeight));
        }
    });

    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return -($(this).outerHeight() / 2);
        },
        'margin-left': function () {
            return -($(this).outerWidth() / 2);
        }
    });
});

~~당신은 부트 스트랩 3.0.3와 데모 여기서 일을 찾을 수 있습니다 http://cdpn.io/GwvrJ~~
편집 : 나는 더 많은 응답 솔루션을 대신 업데이트 된 버전을 사용하는 것이 좋습니다 : http://cdpn.io/mKfCc

업데이트 (2015 년 11 월 30 일) :

function setModalMaxHeight(element) {
  this.$element     = $(element);  
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() < 768 ? 20 : 60;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

( 위의 편집으로 2015 년 11 월 30 일 http://cdpn.io/mKfCc 업데이트 )

답변

내 솔루션

.modal-dialog-center {
    margin-top: 25%;
}

    <div id="waitForm" class="modal">
        <div class="modal-dialog modal-dialog-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="headerBlock" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <span id="bodyBlock"></span>
                    <br/>
                    <p style="text-align: center">
                        <img src="@Url.Content("~/Content/images/progress-loader.gif")" alt="progress"/>
                    </p>
                </div>
            </div>
        </div>
    </div>

답변

간단하게 고칠 수 있습니다 display: flex

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
}

.modal.in .modal-dialog {
  transform: translate(0, 0);
}

접두사

.modal-dialog {
  margin-top: 0;
  margin-bottom: 0;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

답변

나는 순수한 CSS 솔루션을 생각해 냈습니다! css3이지만, 즉 ie8 이하는 지원되지 않지만 ios, android, ie9 +, chrome, firefox, desktop safari에서 테스트되고 작동합니다.

다음 CSS를 사용하고 있습니다.

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

여기 바이올린이 있습니다.
http://codepen.io/anon/pen/Hiskj

.. 모달이 두 개 이상인 경우 브라우저를 무릎으로 가져 오는 여분의 무거운 자바 스크립트가 없으므로 올바른 답변으로 선택하십시오.

답변

flexbox를 사용해도 괜찮다면 문제 해결에 도움이 될 것입니다.

.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.modal-content {
  margin: 0 auto;
}

답변

내 해결책 :

.modal.in .modal-dialog
{
    -webkit-transform: translate(0, calc(50vh - 50%));
    -ms-transform: translate(0, 50vh) translate(0, -50%);
    -o-transform: translate(0, calc(50vh - 50%));
    transform: translate(0, 50vh) translate(0, -50%);
}