Bootstrap 모달 상자를 수직으로 가운데에 맞추는 방법

오늘은 부트스트랩 모달박스를 수직으로 중앙에 맞추는 방법을 가르쳐 드리겠습니다.

현재 버전의 부트스트랩은 3.x입니다. 현재 버전에서는 부트스트랩 모달(모달 상자)에 대해 수직 센터링 속성이 제공되지 않습니다.

모달을 수직 중앙에 맞추려면 현재 직접 처리해야 합니다.

Option 1. 모달이 성공적으로 표시되면 margin-top 위치를 재설정합니다.

<p class="modal " id="myModal">
        <p class="modal-dialog">
            <p class="modal-content">
                <p class="modal-header">
                    <button class="close" data-dismiss=&#39;modal&#39;>×</button>
                    <h4 class="modal-title">测试模态框标题</h4>
                </p>
                <p class="modal-body">
                    <p>内容…</p>
                </p>
                <p class="modal-footer">
                    <button class="btn btn-default" data-dismiss=&#39;modal&#39;>关闭</button>
                </p>
            </p>

        </p>
    </p>

    <button class="btn btn-primary" data-toggle=&#39;modal&#39; data-target=&#39;#myModal&#39;>
        点击测试弹框
    </button>

성공적인 로딩 이벤트 모니터링:

$('#myModal').on('shown.bs.modal', function () {
    var $this = $(this);
    var dialog = $this.find('.modal-dialog');

    //此种方式，在使用动画第一次显示时有问题
    //解决方案，去掉动画fade样式
    var top = ($(window).height() - dialog.height()) / 2;
    dialog.css({
        marginTop:top
    });
});

Option 2. 소스 코드를 수정하고 margin-top 위치를 미리 설정합니다. 소스 코드에서 (권장)

참고: 이 방법은 애니메이션 페이드를 사용할 때 정상적으로 표시됩니다.

소스 코드 수정 및 대화 상자 위치 설정

  Modal.prototype.adjustDialog = function () {
    var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight

    this.$element.css({
      paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
    })

      // 是弹出框居中。。。
      var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
      var m_top = ( $(window).height() - $modal_dialog.height() )/2;
      $modal_dialog.css({'margin': m_top + 'px auto'});
  }

관련 권장 사항:

bootstrap 연구 노트 bootstraplayout method_html/css_WEB-ITnose

Bootstrap 항목 노트(제로) Bootstrap 소개_html/ css_WEB-ITnose

위 내용은 Bootstrap 모달 상자를 수직으로 가운데에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!