[javascript] 수직 중심 부트 스트랩 모달 창

뷰포트 (가운데)에 모달을 중앙에 놓고 싶습니다 .CSS 속성을 추가하려고했습니다.

 .modal { position: fixed; top:50%; left:50%; }

이 예제를 사용하고 있습니다 http://jsfiddle.net/rniemeyer/Wjjnd/

나는 시도했다

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

답변

이것은 작업을 수행합니다 : http://jsfiddle.net/sRmLV/1140/

helper-div와 일부 사용자 정의 CSS를 사용합니다. 자바 스크립트 나 jQuery가 필요하지 않습니다.

HTML (부트 스트랩의 데모 코드 기반 )

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

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

답변

gpcola의 답변이 저에게 효과적이지 않기 때문에 조금 편집하여 작동합니다. 변환 대신 “마진 상단”을 사용했습니다. 또한 “shown”이벤트 대신 “show”를 사용합니다. 왜냐하면 포지셔닝의 점프가 매우 나빴 기 때문입니다 (부트 스트랩 애니메이션이 켜져있을 때 표시됨). 위치를 지정하기 전에 디스플레이를 “block”으로 설정하십시오. 그렇지 않으면 $ dialog.height ()가 0이되고 모달이 완전히 중앙에 위치하지 않습니다.

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

답변

이것이 내 앱에서 한 일입니다. bootstrap.css 파일에서 다음 클래스를 살펴보면 .modal-dialog의 기본 패딩은 10px 및 @media 화면이고 (최소 너비 : 768px) .modal-dialog의 상단 패딩은 30px로 설정되어 있습니다. 따라서 사용자 정의 CSS 파일에서 미디어 화면 너비를 지정하지 않고 모든 화면에서 상단 패딩을 15 %로 설정했습니다. 도움이 되었기를 바랍니다.

.modal-dialog {
  padding-top: 15%;
}

답변

모든 HTML5 브라우저에서 찾은 가장 좋은 방법 :

body.modal-open .modal {
    display: flex !important;
    height: 100%;
}

body.modal-open .modal .modal-dialog {
    margin: auto;
}

답변

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <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>
</div>

// 스타일

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

답변

.modal.fade.in에서 top 매개 변수를 재정 의하여 사용자 정의 선언에 설정된 값을 강제로 지정하고 !importanttop 뒤에 키워드를 추가하십시오 . 그러면 브라우저는 해당 값을 사용하고 키워드의 다른 값은 무시합니다. 여기에는 다른 곳에서는 값을 무시할 수 없다는 단점이 있습니다.

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
}

답변

Bootstrap 4부터는 JavaScript없이이를 위해 다음 클래스가 추가되었습니다.

modal-dialog-centered

여기에서 해당 설명서를 찾을 수 있습니다 .

vd를 지적 해 주셔서 감사합니다. 모달을 세로로 가운데에 맞추려면 .modal-dialog-centered를 .modal-dialog에 추가해야합니다.