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


270

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

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

  2. 모달이 화면 높이를 초과하는 경우에만 모달을 중앙에 배치하고 모달 본체에서 overflow : auto를 가질 수 있습니까?

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

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

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

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

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


1
@Heiken 어떤 이유로 든 화면에서 아래로 점프하게됩니다. Chrome을 사용하는 Im
Sven van den Boogaart

답변:


374
.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 클래스를 조정하여 가운데가 아닌 창의 상단 경계에 표시되도록하십시오.


실제로 실수로 이것을 재정의했습니다. 실제로 장면 뒤에서 작동한다는 점을 지적 해 주셔서 감사합니다.
Dorian

이것은 아마도 부트 스트랩 모달뿐만 아니라 다른 모든 것을 수직으로 중앙에 배치하는 가장 좋은 방법입니다. css-tricks.com/centering-in-the-unknown
Mark S

4
나는 이것이 모바일에서 잘 작동하지 않는다는 것을 분명히합니다. ": after"정의는 높이가 100 %이고 모달을 페이지 아래쪽으로 자동으로 이동할 수 있기 때문입니다. 방금 .modal {display : flex! 중요;} .modal-dialog {margin : auto}. 92.97 %의 사람들이 이미이 CSS 속성 사용을 지원했지만 일반 지원을 위해 JavaScript를 사용하여 여백을 설정할 수 있습니다.
Walter Chapilliquen-wZVanG

21
절대적으로 훌륭하지만 768px 이상 만 사용하고 모바일에서는 기본 설정을 유지하는 것이 좋습니다. 화면 높이가 작은 경우 상단 위치는 모달에 가장 적합합니다. 또한 애니메이션이 중앙에서 보이도록 조정했습니다. 여기에 누군가가 필요로하는 경우의 실제 작업 예 : codepen.io/anon/pen/zGBpNq
bwitkowicz

이 솔루션은 2px 동안 모달 창을 오른쪽으로 이동합니다. 그러나 이것은 : after
Cypher

146

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 업데이트 )


1
훌륭한 답변과 게시물! 그러나 이것도 애니메이션이 될 수 있습니까? 그냥 튀어 나올 때 잘 작동하지만 애니메이션은 어떻습니까? 나는 일하고 있고 atm을 테스트 할 수는 없지만 결과를보고 싶어합니다.
scooterlord

모달에 페이드 클래스를 추가 할 수 있습니다. 에서 내 업데이트 솔루션을 확인 cdpn.io/mKfCc
dimbslmh

코드 펜에서 훌륭하게 작동하는 것처럼 보이지만 프로젝트에서 작동하도록 할 수는 없습니다. 코드를 추가하고 올바른 것을 대체하지 않아도 될 것 같습니까?
scooterlord

1
다시 이봐! 다음을 주목하십시오. 첫 번째 모달이 처음 열리면 크기를 한 번 조정할 때까지 오른쪽 여백이 잘못되었습니다. 이것에 대한 어떤 ide?
scooterlord

1
@bernie document.ready : browserstack.com/screenshots/ 에서 짧은 모달이 열려있는 코드 펜 포크로 Browserstack에서 스크린 샷을 만들었습니다. BrowserStack은 스크린 샷 (vet)에 v9.3.x를 지원하지 않지만 (아직) iOS 6.0에서 설명한 것과 비슷한 것 (스크린 샷 iPad 3rd (6.0) (Portrait) 참조). 아마도 v9.3.2에서 반환 된 오래된 버그 일 것입니다. 원하는 경우 forums.developer.apple.com/community/safari-and-web/
dimbslmh

37

내 솔루션

.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>

패딩 탑을 사용해야합니다. 오버레이를 클릭하면 마진이 닫기 동작을 중단합니다
anvd

2
여백 상단을 25 %로 설정하려면 모달의 키가 50 % 여야합니다.
반란

28

간단하게 고칠 수 있습니다 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);
}

2
이것은 100vh 높이로 인해 배경이 클릭되는 것을 방지합니다. "배경 : '정적'"설정에 적합합니다.
ianstigator

이것은 애니메이션 문제를 페이드 아웃
Viswanath Lekshmanan

23

나는 순수한 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

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


8
JavaScript를 사용하는 요점은 모달의 높이를 알 수 없었습니다 . 솔루션의 고정 높이는 80 %이며, "모달 의 정확한 높이를 모르는 경우 어떻게 모달을 중앙에 수직으로 배치 할 수 있습니까?"
dimbslmh

... 높이 치수는 화면 높이와 비교하여 최대 모달 높이를 제한하도록 설정되어 있습니다. 그러나 번역의 백분율은 콘텐츠 높이에 따라 설정됩니다.
scooterlord

3
: 당신은 모달 상자의 크기뿐만 아니라 다음과 같은 CSS 솔루션을 시도 변경되지 않는 솔루션을 얻고 싶은 경우에 tweaks.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal
klickagent.ch

아주 좋습니다. 그러나 그것은 내가 설명하는 것과는 다른 접근법을 가지고 있습니다. 귀하의 경우 전체 모달이 위아래로 움직이고 제 경우에는 오버플로 된 요소가 생성됩니다. 그래도 아주 좋은! 나는 그것을 좋아한다!
scooterlord

높이를 설정해야합니다. 사용자가 요청한 것과 정확히 같지 않습니다.
반란

21

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

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

.modal-content {
  margin: 0 auto;
}

7
이 답변이 저에게 효과적이라는 것을 알았습니다. 그러나 사용자가 배경을 클릭하여 모달을 닫을 수있게 pointer-events: none하려면 .modal-dialogpointer-events: auto에 추가 해야 합니다 .modal-content. Becausu .modal-dialog {height: 100%}는 모달 아래의 전체 열을 덮고 사용자가 해당 영역의 배경을 클릭하지 못하게합니다.
wuct

@ChingTingWu에서 제안, 가장 효과적인 결합
스트라이더

그리고 @ChingTingWu 제안은 어디에 있습니까?
giovannipds

1
ChingTingWu는 @wuct에 변화가있는 것
주 샤

1
@giovannipds 죄송합니다. 사용자 이름이 더 짧고 태그가 추가되어 이름이 바뀌 었습니다. 죄송합니다 :) 혼란에 대한
wuct을

20

내 해결책 :

.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%);
}

이것은 Bootstrap 3에서 완벽하게 작동하는 것 같습니다. 이것이 왜 대답이 맞지 않습니까? 다른 것보다 훨씬 간단합니다 (4 CSS 지시문).
danielricecodes

@danielricecodes 저는 뷰포트 단위의 문제로 인해 사진을 찍을 것이라고 가정합니다 . . scooterlord의 제안 된 답변은 IE9 및 iO와의 호환성을 제안했지만 나에게 문제가됩니다. canIuse의 이슈 페이지를 확인하면 iO 및 IE10 이상에 문제가 있음을 알 수 있습니다. 나는 이것이 정답이라는 것에 동의하거나 아닙니다. 왜 난 그냥 지적하고있어 어쩌면 이 답으로 선택되지 않았습니다.
Malavos

1
이 방법에는 모달에 스크롤 가능한 내용 (창에 들어있는 것보다 더 많은 내용)이있을 때 문제가 있습니다.
Steven Pribilinskiy

이것은 정답입니다. 지금까지 이것이 유일한 해결책입니다. 고마워
shifu

모달 콘텐츠가 화면 높이보다 크면 (모달을 스크롤
Brett Gregson

18

내 경우에 한 모든 일은 모달의 높이를 알고 내 CSS에서 Top을 설정하는 것입니다.

<div id="myModal" class="modal fade"> ... </div>

내 CSS에서 내가 설정

#myModal{
    height: 400px;
    top: calc(50% - 200px) !important;
}

1
CSS에 대한 멍청한 말로서,이 답변은 가장 무섭지 않은 것처럼 보였고 일을 끝냈습니다.
Oded Ben Dov

2
".. 모달의 정확한 높이를 모를 때?"
natec

15

이 간단한 CSS를 추가해도 작동합니다.

.modal-dialog {
  height: 100vh !important;
  display: flex;
}

.modal-content {
  margin: auto !important;
  height: fit-content !important;
}

적합 콘텐츠 란 무엇입니까?
Marc Roussel

12

CSS를 사용하여이 작업을 수행하는 가장 쉬운 방법이 있습니다.

.modal-dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width:500px;
    height:300px;
}

그게 다야. .modal-dialog컨테이너 div 에만 적용하면 됩니다.

데모 : https://jsfiddle.net/darioferrer/0ueu4dmy/


7
고정 너비와 높이로 인해 모바일에서 응답하지 않습니다.
ianstigator

귀하의 답변은 모든 장치의 화면 해상도가 동일하다고 가정합니다
Patricio Rossi

남자는 없어 이 예제를 이해하고 각 사례에 맞게 조정할 수 있다고 가정합니다.
Dario Ferrer

Bootstrap v3.3.0에서 성공적으로 실행, 감사합니다
Amin Ghaderi

11

@Finik의 탁월한 답변을 바탕으로이 수정은 비 모바일 기기에만 적용됩니다. IE8, Chrome 및 Firefox 22에서 테스트했습니다. 매우 길거나 짧은 콘텐츠에서 작동합니다.

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

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

8

내가 쓴 가장 보편적 인 솔루션. Dynamicaly는 대화 높이로 계산합니다. (다음 단계는 창 크기를 조정할 때 대화 상자의 높이를 다시 계산할 수 있습니다.)

JSfiddle : http://jsfiddle.net/8Fvg9/3/

// initialise on document ready
jQuery(document).ready(function ($) {
    'use strict';

    // CENTERED MODALS
    // phase one - store every dialog's height
    $('.modal').each(function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            fadeClass = (t.is('.fade') ? 'fade' : '');
        // render dialog
        t.removeClass('fade')
            .addClass('invisible')
            .css('display', 'block');
        // read and store dialog height
        d.data('height', d.height());
        // hide dialog again
        t.css('display', '')
            .removeClass('invisible')
            .addClass(fadeClass);
    });
    // phase two - set margin-top on every dialog show
    $('.modal').on('show.bs.modal', function () {
        var t = $(this),
            d = t.find('.modal-dialog'),
            dh = d.data('height'),
            w = $(window).width(),
            h = $(window).height();
        // if it is desktop & dialog is lower than viewport
        // (set your own values)
        if (w > 380 && (dh + 60) < h) {
            d.css('margin-top', Math.round(0.96 * (h - dh) / 2));
        } else {
            d.css('margin-top', '');
        }
    });

});

7

여기 에서 완벽한 솔루션을 찾았습니다

$(function() {
    function reposition() {
        var modal = $(this),
            dialog = modal.find('.modal-dialog');
        modal.css('display', 'block');

        // Dividing by two centers the modal exactly, but dividing by three 
        // or four works better for larger screens.
        dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
    }
    // Reposition when a modal is shown
    $('.modal').on('show.bs.modal', reposition);
    // Reposition when the window is resized
    $(window).on('resize', function() {
        $('.modal:visible').each(reposition);
    });
});

1
감사합니다. 하나의 변경으로 나에게 완벽합니다 : dialog.css ( "margin-top", Math.max (0, ($ (document) .scrollTop () + (($ (window) .height ()-dialog.height ())) / 2))));
Viacheslav Soldatov

4
$('#myModal').on('shown.bs.modal', function() {
    var initModalHeight = $('#modal-dialog').outerHeight(); //give an id to .mobile-dialog
    var userScreenHeight = $(document).outerHeight();
    if (initModalHeight > userScreenHeight) {
        $('#modal-dialog').css('overflow', 'auto'); //set to overflow if no fit
    } else {
        $('#modal-dialog').css('margin-top', 
        (userScreenHeight / 2) - (initModalHeight/2)); //center it if it does fit
    }
});

셀렉터에 대한 몇 가지 조정으로 매력처럼 작동했습니다. @$modal = $('.fade.in'); modalBox = @$modal.find('.modal-content'); initModalHeight = modalBox.outerHeight(); userScreenHeight = @$modal.outerHeight()
juliangonzalez

4

다음은 꽤 잘 작동하고 이것을 기반으로하는 다른 CSS 전용 방법입니다 .http : //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

사스 :

.modal {
    height: 100%;

    .modal-dialog {
        top: 50% !important;
        margin-top:0;
        margin-bottom:0;
    }

    //keep proper transitions on fade in
    &.fade .modal-dialog {
        transform: translateY(-100%) !important;
    }
    &.in .modal-dialog {
        transform: translateY(-50%) !important;
    }
}

다른 transform솔루션과 마찬가지로이 문제는 모달에 스크롤 가능한 내용 (창에 맞는 것보다 많은 내용)이있을 때 발생합니다.
Steven Pribilinskiy

3

벨로우즈 링크에서 bootstrap3-dialog를 다운로드했으며 bootstrap-dialog.js의 열린 기능을 수정했습니다.

https://github.com/nakupanda/bootstrap3-dialog

암호

open: function () {
            !this.isRealized() && this.realize();
            this.updateClosable();
            //Custom To Vertically centering Bootstrap 
            var $mymodal = this.getModal();
            $mymodal = $mymodal.append('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center" valign="middle" class="centerModal"></td></tr></table>');
            $mymodal = $mymodal.find(".modal-dialog").appendTo($mymodal.find(".centerModal"));
            //END
            this.getModal().modal('show');
            return this;
        }

CSS

.centerModal .modal-header{
    text-align:left;
}
.centerModal .modal-body{
    text-align:left;
} 

다음은 원래 BSDialog 소스를 변경하지 않고, 자신의 코드에 적용 할 수있는 수정의 gist.github.com/mahemoff/8ff6d3782d2da6f9cbb3 합니다 (JS 단지 일부 수정, 또한이 커피로 작성하지만 당신은 아이디어를 얻을).
mahemoff

3

이것은 나를 위해 작동합니다 :

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

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

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

2

다음과 같이 해보십시오 :

.popup__overlay {
    position: fixed;
    left:  0;
    top:  0;
    width: 100%;
    height: 100%;
    z-index: 999;
    text-align: center
    }
.popup {
    display: inline-block;
    vertical-align: middle
    } 

1
이것은 꽤 잘 작동 할 수 있지만 부트 스트랩 모달에는 내부와 내부에 고정이 있습니다 ... : /
scooterlord

1
이 클래스는 Bootstrap / Bootstrap 모달과 어떤 관련이 있습니까?
lofihelsinki


1

간단한 방법. 나를 위해 일하십시오. Thks rensdenobel :) http://jsfiddle.net/rensdenobel/sRmLV/13/

<style>
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}
</style>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>    

1

window.resize이벤트와 on 에 각각의 보이는 모달에 유효한 위치를 설정하는 또 다른 솔루션 show.bs.modal:

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
            offset       = ($(window).height() - $dialog.height()) / 2,
            bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);

    });
})(jQuery);

1
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
    var $modals;
    if ($element.length) {
        $modals = $element;
    } else {
        $modals = $(modalVerticalCenterClass + ':visible');
    }
    $modals.each( function(i) {
        var $clone = $(this).clone().css('display', 'block').appendTo('body');
        var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
        top = top > 0 ? top : 0;
        $clone.remove();
        $(this).find('.modal-content').css("margin-top", top);
    });
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

1

조금 늦었다는 것을 알고 있지만 군중에서 길을 잃지 않도록 새로운 답변을 추가하고 있습니다. 그것은 모든 곳에서 제대로 작동하는 데스크탑 간 모바일 브라우저 솔루션입니다.

그것은 단지 필요 modal-dialog내부에 랩 할 modal-dialog-wrap클래스와 다음 코드 추가가 필요합니다 :

.modal-dialog-wrap {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.modal-dialog {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.modal-content {
  display: inline-block;
  text-align: left;
}

대화 상자가 중앙에서 시작되고 큰 내용의 경우 스크롤 막대가 나타날 때까지 세로로 커집니다.

당신의 즐거움을 위해 작동하는 바이올린이 있습니다!

https://jsfiddle.net/v6u82mvu/1/


1

이것은 매우 오래되었으며 Bootstrap 3을 사용하여 솔루션을 요구하지만 Bootstrap 4에는라는 내장 솔루션이 .modal-dialog-centered있습니다. 문제는 다음과 같습니다. https://github.com/twbs/bootstrap/issues/23638

따라서 v4를 사용 하면 모달을 세로로 가운데 에 추가 .modal-dialog-centered하기 만하면됩니다 .modal-dialog.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

0

부트 스트랩 모달 플러그인은 여기에서 찾을 사용을 고려 - https://github.com/jschr/bootstrap-modal

플러그인은 모든 모달을 중앙에 배치합니다


... 불행히도 나는 그것을 시도했지만 적어도 내 코드로는 제대로 작동하지 못했습니다. 모든 사람이이 요구를 자신의 필요에 맞게 사용자 정의해야한다고 생각합니다. 답장을 보내 주셔서 감사합니다.
scooterlord

0

센터링의 경우 지나치게 복잡한 솔루션을 얻지 못합니다. 부트 스트랩은 이미 수평으로 중앙에 배치되므로이를 망칠 필요가 없습니다. 내 솔루션은 jQuery를 사용하여 최고 마진을 설정합니다.

$('#myModal').on('loaded.bs.modal', function() {
    $(this).find('.modal-dialog').css({
        'margin-top': function () {
            return (($(window).outerHeight() / 2) - ($(this).outerHeight() / 2));
        }
    });
});

내용을 원격으로로드 할 때 loaded.bs.modal 이벤트를 사용했으며 shown.ba.modal 이벤트를 사용하면 높이 계산이 잘못됩니다. 반응 형이어야 할 경우 창의 크기를 조정하는 이벤트를 추가 할 수 있습니다.


모달이 충분히 큰 경우, 그것은 문제가 발생할 수 있습니다
scooterlord

0

이 개념을 달성하는 매우 쉬운 방법이며 항상 fls로 CSS로 화면의 모드에서 모달을 얻을 수 있습니다 : http://jsfiddle.net/jy0zc2jc/1/

당신은 modalCSS로 다음과 같이 클래스 표시를해야합니다.

display:table

modal-dialog같은display:table-cell

주어진 바이올린에서 전체 작업 예를 참조하십시오


나는 모달을 전혀
보지 못합니다

내가 (Chrome에서) 볼 수있는 유일한 것은 적십자 아이콘과 배경입니다
ThaDafinser

모달이 창에 맞는 것보다 더 많은 내용을 가지고있을 때는 스크롤이되지 않습니다
Steven Pribilinskiy

0

그렇게 복잡하지 않습니다.

이것을 시도하십시오 :

$(document).ready(function(){
    var modalId = "#myModal";
    resize: function(){
            var new_margin = Math.ceil(($(window).height() - $(modalId).find('.modal-dialog').height()) / 2);
            $(modalId).find('.modal-dialog').css('margin-top', new_margin + 'px');
    }
    $(window).resize(function(){
        resize();
    });
    $(modalId).on('shown.bs.modal', function(){
        resize();
    });
});

0

모달을 중심으로하는이 간단한 스크립트를 사용하십시오.

원하는 경우 기능을 일부 모달로만 제한하도록 사용자 정의 클래스 (예 : .modal 대신 .modal.modal-vcenter)를 설정할 수 있습니다.

var modalVerticalCenterClass = ".modal";

function centerModals($element) {
    var $modals;
    if ($element.length) {
    $modals = $element;
    } else {
    $modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
    top = top > 0 ? top : 0;
    $clone.remove();
    $(this).find('.modal-content').css("margin-top", top);
    });
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
    centerModals($(this));
});
$(window).on('resize', centerModals);

또한 모달의 수평 간격에 대한이 CSS 수정 사항을 추가하십시오. 모달에 스크롤을 표시하면 Bootstrap에 의해 본문 스크롤이 자동으로 숨겨집니다.

/* scroll fixes */
.modal-open .modal {
    padding-left: 0px !important;
    padding-right: 0px !important;
    overflow-y: scroll;
}

0

모바일 plantform에서는 조금 다르게 보일 수 있습니다. 여기 내 코드가 있습니다.

<div class="modal-container">
  <style>
  .modal-dialog{
    margin-top: 60%;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 100%
  }
  @media screen and (orientation:landscape){
    .modal-dialog{
      margin-top: 70;
      width:80%;
      margin-left: 10%;
      margin-right: 10%;
      margin-bottom: 100%
    }
  }
  .modal-body{
    text-align: center;
  }
  .modal-body p{
    margin:14px 0px;
    font-size: 110%;
  }
  .modal-content{
    border-radius: 10px;
  }
  .modal-footer{
    padding:0px;
  }
  .modal-footer a{
    padding: 15px;
  }
  .modal-footer a:nth-child(1){
    border-radius: 0px 0px 0px 10px;
  }
  .modal-footer a:nth-child(2){
    border-radius: 0px 0px 10px 0px;
  }
  </style>
  <h2>Basic Modal Example</h2>
  <div data-toggle="modal" data-target="#myModal">Div for modal</div>
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <p>确定要取消本次订单嘛?</p>
          </div>
          <div class="modal-footer">
            <div class="btn-group btn-group-justified">
              <a href="#" class="btn btn-default" data-dismiss="modal">取消</a>
              <a href="#" class="btn btn-default" data-dismiss="modal">确定</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.