Bootstrap 모달 상자를 수직으로 가운데에 맞추는 방법-JS 튜토리얼-php.cn

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

坏嘻嘻

풀어 주다： 2018-09-13 16:35:39

원래의

2446명이 탐색했습니다.

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

현재 버전의 부트스트랩은 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>

로그인 후 복사

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

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

    //此种方式，在使用动画第一次显示时有问题
    //解决方案，去掉动画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 : &#39;&#39;,
      paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : &#39;&#39;
    })

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

로그인 후 복사