it-swarm.com.de

Vertikal zentrieren Bootstrap modales Fenster

Ich möchte mein Modal auf das Ansichtsfenster (Mitte) zentrieren. Ich habe versucht, einige CSS-Eigenschaften hinzuzufügen

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

Ich verwende dieses Beispiel http://jsfiddle.net/rniemeyer/Wjjnd/

Ich habe es versucht

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

Dies macht den Job: http://jsfiddle.net/sRmLV/1140/

Es verwendet ein Helfer-Div und einige benutzerdefinierte CSS. Kein Javascript oder jQuery erforderlich.

[~ # ~] html [~ # ~] (basierend auf Bootstraps Demo-Code )

<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;
}
247
RNobel

Da die Antwort von gpcola bei mir nicht funktioniert hat, habe ich sie ein wenig bearbeitet, damit sie jetzt funktioniert. Ich habe "margin-top" anstelle von transform verwendet. Außerdem verwende ich das "show" -Ereignis anstelle des "shown" -Ereignisses, weil es mir nach einem sehr schlechten Positionierungssprung (sichtbar, wenn Sie bootstrap Animationen aktiviert haben). Achten Sie darauf, die Anzeige einzustellen vor dem Positionieren "blockieren", andernfalls ist $ dialog.height () 0 und das Modal wird nicht vollständig zentriert.

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

Das habe ich für meine App getan. Wenn Sie sich die folgenden Klassen in der Datei bootstrap.css ansehen, hat .modal-dialog einen Standardabstand von 10px und @media screen und (min-width: 768px) .modal-dialog hat einen oberen Abstand von 30px. Daher habe ich in meiner benutzerdefinierten CSS-Datei den oberen Abstand für alle Bildschirme auf 15% festgelegt, ohne eine Medienbildschirmbreite anzugeben. Hoffe das hilft.

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

Der beste Weg, den ich für alle HTML5-Browser gefunden habe:

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

body.modal-open .modal .modal-dialog {
    margin: auto;
}
59
taha shahid
<!-- 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>

// Styles

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

Der Parameter top wird in .modal.fade.in überschrieben, um den in Ihrer benutzerdefinierten Deklaration festgelegten Wert zu erzwingen. Fügen Sie das !important Schlüsselwort nach oben. Dadurch wird der Browser gezwungen, diesen Wert zu verwenden und alle anderen Werte für das Schlüsselwort zu ignorieren. Dies hat den Nachteil, dass Sie den Wert nirgendwo anders überschreiben können.

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

das funktioniert bei mir perfekt:

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

vollständige Demo URL: https://codepen.io/dimbslmh/full/mKfCc

12

sie können verwenden:

.modal {
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

um es sowohl vertikal als auch horizontal zu zentrieren.

10
Aryeh Armon

Weil die meisten Antworten hier nicht oder nur teilweise funktionierten:

body.modal-open .modal[style]:not([style='display: none;']) {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal[style]:not([style='display: none;']) .modal-dialog {
    margin: auto;
}

Sie müssen den Selektor [style] verwenden, um nur den Stil auf das aktuell aktive Modal anzuwenden, anstatt auf alle Modale. .in Wäre großartig gewesen, aber es scheint erst hinzugefügt zu werden, nachdem der Übergang abgeschlossen ist, was zu spät ist und für einige wirklich schlechte Übergänge sorgt. Glücklicherweise scheint es, dass bootstrap immer ein Style-Attribut auf das Modal anwendet, gerade als es anfängt zu zeigen, dass dies ein bisschen hacky ist, aber es funktioniert.

Der Abschnitt :not([style='display: none;']) ist eine Problemumgehung, um das Stilattribut bootstrap nicht korrekt zu entfernen und stattdessen die Stilanzeige auf none zu setzen, wenn Sie das Dialogfeld schließen.

9
Robert McKee

Ab Bootstrap 4 wurde die folgende Klasse hinzugefügt, um dies für Sie ohne JavaScript zu erreichen.

modal-dialog-centered

Sie finden ihre Dokumentation hier .

8
jcaruso

Sie können die vertikale Ausrichtung auf Bootstrap 3 modal wie folgt erzielen:

.modal-vertical-centered {
  transform: translate(0, 50%) !important;
  -ms-transform: translate(0, 50%) !important; /* IE 9 */
  -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */
}

und fügen Sie diese CSS-Klasse dem Container "Modal-Dialog" hinzu

<div class="modal-dialog modal-vertical-centered">
...

jsFiddle Arbeitsbeispiel: http://jsfiddle.net/U4NRx/

8
EGurelli

Der sauberste und einfachste Weg, dies zu tun, ist die Verwendung von Flexbox! Das Folgende richtet ein Bootstrap 3 modal in der Mitte des Bildschirms vertikal aus und ist so viel übersichtlicher und einfacher als alle anderen hier veröffentlichten Lösungen:

body.modal-open .modal.in {
  display: flex !important;
  align-items: center;
}

HINWEIS: Obwohl dies die einfachste Lösung ist, funktioniert sie aufgrund der Browserunterstützung möglicherweise nicht für alle: http://caniuse.com/#feat=flexbox

Es sieht aus wie (wie üblich) IE hinken hinterher. In meinem Fall sind alle Produkte, die ich für mich selbst oder für Kunden entwickle, IE10 + (es macht keinen Sinn, geschäftlich Entwicklungszeit zu investieren) Unterstützung älterer Versionen von IE, wenn es verwendet werden könnte, um das Produkt tatsächlich zu entwickeln und den MVP schneller herauszubringen.) Dies ist sicherlich kein Luxus, den jeder hat.

Ich habe gesehen, dass größere Websites erkennen, ob flexbox unterstützt wird oder nicht, und eine Klasse auf den Hauptteil der Seite anwenden - aber diese Ebene des Front-End-Engineerings ist ziemlich robust, und Sie würden es immer noch brauchen ein Fallback.

Ich möchte die Menschen ermutigen, sich der Zukunft des Webs anzunehmen. Flexbox ist fantastisch und du solltest damit anfangen, wenn du kannst.

P.S. - Diese Seite hat mir wirklich geholfen, flexbox als Ganzes und auf jeden Anwendungsfall anzuwenden: http://flexboxfroggy.com/

EDIT: Bei zwei Modals auf einer Seite sollte dies für .modal.in gelten

8
Greg Blass

Vorteile:

  • zugriff auf modale Inhalte, auch wenn diese größer als das Gerät sind
  • verwendet nicht display:table-cell (das ist nicht für Layouts gedacht)
  • erfordert keine Änderungen an Standard Bootstrap 3 modal markup
  • positionierung ist reines CSS. Das JS wird hinzugefügt, um das Modal beim Klicken/Tippen darunter und darüber zu schließen
  • Ich habe das nicht vorangestellte SCSS für diejenigen eingefügt, die gulp oder grunt verwenden.
// closes the modal on click/tap below/above the modal

$('.modal-dialog').on('click tap', function(e){
    if (e.target.classList.contains('modal-dialog')) {
    $('.modal').modal('hide');
  }
})
.modal-dialog {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow-y: auto;
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
  .modal-dialog {
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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>

Hinweis : Ich beabsichtige, diese Antwort mit den neuesten Spezifikationen von Bootstrap 3 auf dem neuesten Stand zu halten. Für eine Bootstrap 4-Lösung Siehe diese Antwort (im Moment sind sie mehr oder weniger gleich, aber mit der Zeit könnten sie auseinander gehen). Wenn Sie einen Fehler oder ein Problem damit finden, lassen Sie es mich wissen und ich werde aktualisieren. Vielen Dank.


Sauber, ohne Präfix SCSS (zur Verwendung mit gulp/grunt):

.modal-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
  @media (max-width: 767px) {
    min-height: calc(100vh - 20px);
  }
}
6

Für diejenigen, die angle-ui bootstrap verwenden, können die folgenden Klassen basierend auf den obigen Informationen hinzufügen:

Hinweis: Es sind keine weiteren Änderungen erforderlich und es werden alle Modalitäten aufgelöst.

// The 3 below classes have been placed to make the modal vertically centered
.modal-open .modal{
    display:table !important;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}

.modal-dialog{
    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;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}
3
Jyotirmoy Pan

Für uns ist Javascript nicht erforderlich. Boostrap Modal fügt .in Klasse hinzu, wenn es angezeigt wird. Ändern Sie einfach diese Klassenkombination mit modalclassName.fade.in mit flex css und Sie sind fertig.

fügen Sie dieses CSS hinzu, um Ihr Modal vertikal und horizontal zu zentrieren.

.modal.fade.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
.modal.fade.in .modal-dialog {
    width: 100%;
}
3
No one

Noch eine CSS-Lösung. Funktioniert nicht für Popups, die größer als der Ansichtsbereich sind.

.modal-dialog {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0; 
}
.modal.fade .modal-dialog {
    transition: top 0.4s ease-out;
    transform: translate(0, -50%);
    top: 0;
}
.modal.in .modal-dialog {
    transform: translate(0, -50%);
    top: 50%;
}

Im .modal-dialog Klasse überschreibt die Position auf absolut (von relativ) und zentriert den Inhalt right:0, left: 0

Im .modal.fade .modal-dialog , .modal.in .modal-dialog Einstellen der Übergangsanimation auf top anstatt auf Übersetzen.

margin-top verschiebt das Popup bei kleinen Popups etwas unterhalb der Mitte und bei langen Popups bleibt das Modal mit Header hängen. Daher margin-top:0, margin-bottom:0

Müssen weiter verfeinern.

3
pravin

Fügen Sie einfach das folgende CSS zu Ihrem vorhandenen hinzu, es funktioniert gut für mich

.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;
}
2

Ich denke, dies ist eine etwas sauberere reine CSS-Lösung als die von Rens de Nobel. Auch dies verhindert nicht das Schließen des Dialogs durch Klicken außerhalb.

http://plnkr.co/edit/JCGVZQ?p=preview

Fügen Sie einfach eine CSS-Klasse zum DIV-Container mit der Klasse .modal-dialog hinzu, um eine höhere Spezifität als das Bootstraps-CSS zu erzielen, z. .zentriert.

[~ # ~] html [~ # ~]

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog centered modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Und machen Sie diesen .modal-dialog.centered-Container fest und richtig positioniert.

[~ # ~] CSS [~ # ~]

.modal .modal-dialog.centered {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

Oder noch einfacher mit flexbox.

[~ # ~] CSS [~ # ~]

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
2
Vit Koumar

Meine Wahl, nur ein bisschen CSS: (Funktioniert NICHT in IE8)

.modal.fade .modal-dialog {
    transform: translate(-50%, -80%);
}

.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0px;
}

Sie können mit der ersten Regel spielen, um die Darstellung des Modals zu ändern.

Verwenden von: Bootstrap 3.3.4

2

Basierend auf Aranys Antwort , aber auch für das Blättern verantwortlich.

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

        $dialog.css('margin-top', offset < marginBottom ? marginBottom : offset);
    }

    $(document).on('show.bs.modal', '.modal', positionModals);

    $(window).on('resize', function(e) {
        $('.modal:visible').each(positionModals);
    });
}(jQuery));
2
mathieu

Um die vertikale Modalzentrierung zu bootstrap modal.js hinzuzufügen, habe ich dies am Ende des Modal.prototype.show Funktion:

var $modalDialog = $('.modal-dialog'),
        modalHeight = $modalDialog.height(),
        browserHeight = window.innerHeight;

    $modalDialog.css({'margin-top' : modalHeight >= browserHeight ? 0 : (browserHeight - modalHeight)/2});
1
andersra

Dies funktioniert in BS3, nicht in v2 getestet. Es zentriert das Modal vertikal. Beachten Sie, dass es dort übergeht - wenn Sie möchten, dass es nur an der Position angezeigt wird, bearbeiten Sie die CSS-Eigenschaft transition für .modal-dialog

centerModal = function() {
    var $dialog = $(this).find(".modal-dialog"),
        offset = ($(window).height() - $dialog.height()) / 2;

    // Center modal vertically in window
    $dialog.css({
        'transform': 'translateY(' + offset + 'px) !important',
    });
};

$('.modal').on('shown.bs.modal', centerModal);
$(window).on("resize", function() {
    $('.modal').each(centerModal);
});
1
gpcola

Dies nimmt Aranys Antwort und bewirkt, dass es funktioniert, wenn der Modal größer als die Höhe des Bildschirms ist:

function centerModal() {
    $(this).css('display', 'block');
    var $dialog = $(this).find(".modal-dialog");
    var offset = ($(window).height() - $dialog.height()) / 2;
    //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
    var bottomMargin = $dialog.css('marginBottom');
    bottomMargin = parseInt(bottomMargin);
    if(offset < bottomMargin) offset = bottomMargin;
    $dialog.css("margin-top", offset);
}

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

So richten Sie das Dialogfeld "Modal verically Align Middle All" aus.

/* Hinweis:

1.Selbst wenn Sie keinen Selektor zuweisen müssen, werden alle Modalitäten aus dem Dokument ermittelt und vertikal in die Mitte gebracht

2.Um zu vermeiden, dass ein bestimmtes Modal in der Mitte liegt, können Sie Folgendes verwenden: keinen Selektor im Klickereignis

* /

 $( "[data-toggle='modal']" ).click(function(){
     var d_tar = $(this).attr('data-target'); 
     $(d_tar).show();   
     var modal_he = $(d_tar).find('.modal-dialog .modal-content').height(); 
     var win_height = $(window).height();
     var marr = win_height - modal_he;
     $('.modal-dialog').css('margin-top',marr/2);
  });

Aus Mailand Pandya

1
user3690101
e(document).on('show.bs.modal', function () {
        if($winWidth < $(window).width()){
            $('body.modal-open,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',$(window).width()-$winWidth)
        }
    });
    e(document).on('hidden.bs.modal', function () {
        $('body,.navbar-fixed-top,.navbar-fixed-bottom').css('marginRight',0)
    });
1
Tomtom
.modal.in .modal-dialog {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
1

Die beste Lösung, um Ihr Modal mit Breite und Höhe zu zentralisieren, ist, in css add und in modal diese "Zentralisierung" als Klasse hinzuzufügen.

.centralize{
   position:absolute;
   left:50%;
   top:50%;

   background-color:#fff;
   transform: translate(-50%, -50%);
   width: 40%; //specify watever u want
   height: 50%;
   }
0
yogesh mhetre

Eine weitere CSS-Antwort auf diese Frage ...
Bei dieser Lösung wird CSS nur verwendet, um den gewünschten Effekt zu erzielen, während die Möglichkeit zum Schließen des Modals durch Klicken außerhalb des Modals beibehalten wird. Hier können Sie auch .modal-content Maximale Höhe und Breite, damit Ihr Popup nicht über das Ansichtsfenster hinaus wächst. Ein Bildlauf wird automatisch angezeigt, wenn der Inhalt die modale Größe überschreitet.

Anmerkung:
Das Bootstrap Recommended .modal-dialogdiv sollte weggelassen werden, damit dies ordnungsgemäß funktioniert (scheint nichts zu beschädigen). Getestet in Chrome 51 und IE 11.

CSS-Code:

.modal {
   height: 100%;
   width: 100%;
}

.modal-content {
   margin: 0 auto;
   max-height: 600px;
   max-width: 50%;
   overflow: auto;
   transform: translateY(-50%);
}

EDIT: Das .modal-dialog Klasse können Sie wählen, ob ein Benutzer das Modal schließen kann oder nicht, indem Sie außerhalb des Modals klicken. Die meisten Modals haben eine explizite Schaltfläche "Schließen" oder "Abbrechen". Beachten Sie dies, wenn Sie diese Problemumgehung verwenden.

0
dsanchez

Verwenden Sie dieses einfache Skript, das die Modalitäten zentriert.

Wenn Sie möchten, können Sie eine benutzerdefinierte Klasse festlegen (z. B. .modal.modal-vcenter anstelle von .modal), um die Funktionalität nur auf einige Modale zu beschränken.

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

Fügen Sie auch diese CSS-Korrektur für den horizontalen Abstand des Modals hinzu. wir zeigen den scroll auf den modalen, der body scrolls wird von bootstrap automatisch ausgeblendet:

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