it-swarm.com.de

Bootstrap: Öffnen Sie ein weiteres Modal in Modal

Ich verwende diesen Code, um ein anderes modales Fenster in einem aktuell geöffneten modalen Fenster zu öffnen:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

Was passiert, ist, dass die Bildlaufleiste für 500ms dupliziert wird. Ich vermute, weil der aktuelle Modal immer noch ausgeblendet wird. Es sieht jedoch sehr unruhig und stotternd aus.

Ich würde mich über Vorschläge zur Lösung dieses Problems freuen. 

Ist der Weg dies in einem Onclick-Event unprofessionell zu gestalten?

Ich arbeite mit der Bootstrap-Version 3.0.

Edit: Ich denke, es ist notwendig, die Zeit des Ausblendens eines Modals zu reduzieren. Wie ist das möglich?

67
AlexioVay

data-dismiss lässt das aktuelle modale Fenster schließen

data-toggle öffnet eine neue Modalität mit dem Inhalt href

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

oder

<a data-dismiss="modal" onclick="call the new div here">Click</a>

lass uns wissen, ob es funktioniert.

68
jayeshkv

Meine Lösung schließt das untere Modal nicht, sondern stapelt es wirklich. Das Bildlaufverhalten bleibt korrekt erhalten. In Bootstrap 3 getestet. Damit die Modals wie erwartet stapeln können, müssen Sie sie in Ihrem HTML-Markup von niedrigster zu höchster Ordnung ordnen lassen.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

UPDATE: Wenn Sie Modale gestapelt haben, werden alle Hintergründe unterhalb des untersten Modals angezeigt. Sie können dies beheben, indem Sie das folgende CSS hinzufügen:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Daraufhin erscheint eine modale Kulisse unter dem obersten sichtbaren Modal. Auf diese Weise werden die darunter liegenden unteren Modale grau dargestellt.

66
H Dog

Um ein anderes modales Fenster in einem aktuell geöffneten modalen Fenster zu öffnen,
Sie können bootstrap-modal verwenden.

bootstrap-modal DEMO

23
simple_human

Sie können tatsächlich feststellen, wann das alte Modal geschlossen wird, indem Sie das Ereignis hidden.bs.modal aufrufen:

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

Für weitere Informationen: http://getbootstrap.com/javascript/#modals-events

13
Giraldi

versuche dies

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>

13

Modals in Modal:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

9
RedDevil2015

Twitter-Dokumente besagen, dass benutzerdefinierter Code erforderlich ist ...

Dies funktioniert ohne zusätzliches JavaScript, Benutzerdefiniertes CSS wäre jedoch zu empfehlen.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->

7
CrandellWS

An einem Projekt zu arbeiten, das viele Modals enthält, die andere Modals aufrufen, und ein paar HTML-Typen, die es möglicherweise nicht jedes Mal für jeden Button zu initiieren wissen ... kam zu einer ähnlichen Schlussfolgerung wie @gmaggio, nachdem sie zuerst den langen Weg herumgegangen waren .

BEARBEITEN: Unterstützt jetzt Modalitäten, die über Javascript aufgerufen werden.

BEARBEITEN: Das Öffnen eines Scroll-Modals von einem anderen Modal aus funktioniert jetzt.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Platzieren Sie die modale Aufrufschaltfläche wie gewohnt, und wenn sie als modal aufgerufen wird, schließt sie zuerst die aktuelle, bevor Sie die in data-target ..__ angegebene Option öffnen. Beachten Sie, dass relatedTarget von Bootstrap bereitgestellt wird.

Ich habe auch folgendes hinzugefügt, um das Ausblenden ein wenig zu glätten: Ich bin sicher, dass noch mehr getan werden kann.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
7
Renier Strydom

Für jemanden, der bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/ verwendet

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

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

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

4
helloroy

Versuche dies:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

Dieser einfache Hack funktioniert für mich.

3
Christian

Für Bootstrap 4, um die Antwort von @ helloroy zu erweitern, habe ich Folgendes verwendet: -

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

Der Vorteil des oben genannten ist, dass es keine Wirkung hat, wenn es nur einen Modal gibt, es wirkt nur bei Vielfachen. Zweitens delegiert er die Handhabung an den Körper, um sicherzustellen, dass zukünftige Modalitäten, die derzeit nicht generiert werden, noch berücksichtigt werden.

Update

Der Wechsel zu einer kombinierten js/css-Lösung verbessert das Erscheinungsbild - die Animation für das Ausblenden funktioniert weiterhin im Hintergrund; -

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

kombiniert mit den folgenden css: -

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

Dadurch werden bis zu 4 tief verschachtelte Modale verarbeitet, mehr als ich brauche.

3
smartbloke

Update für 2018 - Bootstrap 4 verwenden

Ich fand, dass die meisten Antworten viele unnötige jQuery haben. Um ein Modal von einem anderen Modal aus zu öffnen, können Sie einfach die Ereignisse verwenden, die Bootstrap bereitstellt, beispielsweise "show.bs.modal". Möglicherweise möchten Sie auch, dass CSS die Hintergrundüberlagerungen verarbeitet. Hier sind die 3 offenen Modalitäten aus anderen Szenarien ...

Open-Modal aus einem anderen Modal (1. Modal offen lassen)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

Ein mögliches Problem in diesem Fall ist, dass die Kulisse des 2. Modals den 1. Modal verdeckt. Um dies zu verhindern, erstellen Sie den 2. Modal data-backdrop="static" und fügen Sie CSS hinzu, um die Z-Indizes der Hintergründe zu korrigieren.

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl


Open Modal aus einem anderen Modal (close 1st modal)

Dies ist ähnlich wie in dem obigen Szenario. Da jedoch beim Öffnen des 2. Modal der 1. Modal geschlossen wird, ist kein CSS-Hintergrundfix erforderlich. Eine einfache Funktion, die das 2. Modal show.bs.modal-Ereignis behandelt, schließt das 1. Modal.

$ ("# myModal2"). on ('show.bs.modal', Funktion (e) { $ ("# myModal1"). modal ("hide"); });

https://www.codeply.com/go/ejaUJ4YANz


Open modal inside ein anderes modal

Das letzte Szenario mit mehreren Modalen öffnet die zweite Modalität innerhalb der ersten Modalität. In diesem Fall wird der Markup für den 2. Platz innerhalb des 1. Platzes platziert. Es wird kein zusätzliches CSS oder jQuery benötigt.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

3
Zim

Ich ging alle zusammen eine andere Route, ich entschied mich, sie zu "de-nest". Vielleicht findet jemand das praktisch ...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.
2
Dylan Hayes

Ich hatte auch einige Probleme mit meinen scrollbaren Modalen, also habe ich so etwas gemacht:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

Es wird für jede Modalität innerhalb einer Modal dienen, die erscheinen soll . Beachten Sie, dass der erste geschlossen sein kann, der zweite also erscheinen kann . Keine Änderungen in der Bootstrap-Struktur.

2
teefars

Mein Code und funktionieren so gut Verwenden von Daten-Ablehnen

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>
2
user3675926

Schließen Sie den ersten Bootstrap-Modal und öffnen Sie den neuen Modal dynamisch.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
1
Abhishek

versuche dies:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});
0
Rakesh Vadnal

Warum nicht einfach den Inhalt des modalen Körpers ändern?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

Fügen Sie in der Modalität einfach einen Link oder eine Schaltfläche ein

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

Wenn Sie nur zwischen zwei Modalen wechseln möchten:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

Fügen Sie in der Modalität einfach einen Link oder eine Schaltfläche ein

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
0
Carlo

Die Antwort von H Dog ist großartig, aber diese Herangehensweise hat mir in Internet Explorer 11 tatsächlich etwas modales Flimmern gebracht H Dogs-Lösung) fügen wir die Klasse "Modal-Open" erneut hinzu. Ich vermute, dass dies irgendwie das Flimmern verursacht, das ich sah, möglicherweise aufgrund einiger langsamer HTML/CSS-Rendering.

Eine andere Lösung besteht darin, zu verhindern, dass Bootstrap die Klasse 'modal-open' überhaupt aus dem body-Element entfernt. Mit bootstrap 3.3.7 funktioniert diese Überschreibung der internen hideModal - Funktion perfekt für mich.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

In dieser Überschreibung wird die Klasse "Modal-Open" nur entfernt, wenn keine sichtbaren Modals auf dem Bildschirm angezeigt werden. Sie verhindern, dass ein Rahmen entfernt und eine Klasse zum body-Element hinzugefügt wird.

Fügen Sie einfach die Überschreibung hinzu, nachdem Bootstrap geladen wurde.

0
user3123786