Heim  >  Artikel  >  Web-Frontend  >  So zentrieren Sie das Bootstrap-Modalfeld vertikal

So zentrieren Sie das Bootstrap-Modalfeld vertikal

坏嘻嘻
坏嘻嘻Original
2018-09-13 16:35:392486Durchsuche

Heute werde ich Ihnen beibringen, wie Sie die Bootstrap-Modalbox vertikal zentrieren. Ich hoffe, Sie lernen geduldig.

Die aktuelle Version von Bootstrap ist 3.x. In der aktuellen Version gibt es kein vertikales Zentrierungsattribut für Bootstrap-Modal (Modal-Box).

Wenn Sie möchten, dass das Modal vertikal zentriert wird, müssen Sie sich derzeit selbst darum kümmern.

Option 1. Nachdem das Modal erfolgreich angezeigt wurde, setzen Sie die Position von margin-top zurück

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

Erfolgsereignisüberwachung beim Laden:

$(&#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. Ändern Sie den Quellcode. Legen Sie im Voraus die Position von margin-top fest (empfohlen)

Hinweis: Diese Methode wird angezeigt Bei Verwendung von Animationen ist die Ausblendung normal.

Ändern Sie den Quellcode und legen Sie die Dialogposition fest, an der

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

Verwandte Empfehlungen:

Bootstrap-Studiennotizen Bootstrap-Layout-Methode_html/css_WEB-ITnose

Bootstrap Getting Started Notes (Zero) Einführung in Bootstrap_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Bootstrap-Modalfeld vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn