Der modale Hintergrund des Twitter-Bootstraps verschwindet nicht

260

Ich verwende den Twitter Bootstrap Modal Dialog. Wenn ich im modalen Bootstrap-Dialogfeld auf die Schaltfläche "Senden" klicke, wird eine AJAX-Anfrage gesendet. Mein Problem ist, dass der modale Hintergrund nicht verschwindet. Das Modal-Dialogfeld wird zwar korrekt ausgeblendet, aber der "Modal-Hintergrund", der die Deckkraft auf dem Bildschirm erzeugt, bleibt erhalten

Was kann ich tun?

Paganotti
quelle
5
Benutzt du $('#myModal').modal('hide')? Können Sie hier einen Code einfügen?
Pigueiras
20
Wenn Sie ein Kopieren und Einfügen von der getboostrap-Site selbst in einen von HTML generierten Selektor verwenden, müssen Sie den Kommentar '<! - /.modal ->' entfernen. Bootstrap wird verwirrt und denkt, dass der Kommentar ein zweites modales Element ist. Es wird ein weiterer Hintergrund für dieses "zweite" Element erstellt.
Jordanien
@ Jordan: Dein Kommentar muss eine Antwort sein! In meinem Fall war Ihr Kommentar die richtige Lösung!
BlaM
Siehe die folgenden: stackoverflow.com/questions/22207377/…
Nutan
Ich weiß, dass die Frage alt ist, aber heute habe ich ein ähnliches Problem. In meiner Situation gab es eine Fehlentfernung der Klasse "modal-lg", die nur "modal" überlassen wurde, was zu Chaos führte, wenn Sie das Modal schließen wollten mit der Tastatur / irgendwo draußen klicken.
Matteo

Antworten:

549

Stellen Sie sicher, dass Sie den Container mit dem eigentlichen modalen Fenster nicht ersetzen, wenn Sie die AJAX-Anforderung ausführen, da Bootstrap beim Versuch, ihn zu schließen, keinen Verweis darauf finden kann. Entfernen Sie in Ihrem Ajax Complete Handler das Modal und ersetzen Sie die Daten.

Wenn das nicht funktioniert, können Sie es jederzeit erzwingen, indem Sie Folgendes tun:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
ChezFre
quelle
16
Würde diese Antwort +2 geben, wenn ich könnte. Hab mir nur Stunden gespart!
Andre Lombaard
9
Das Ausblenden des Modals vor dem AJAX-Aufruf ist eine schlechte Lösung, wenn Sie die AJAX-Antwort auswerten und das Modal entsprechend aktualisieren müssen.
Asciimo
19
Ich glaube, dies kann auch durch den Aufruf von modal ('hide') verursacht werden, bevor die Fade-Animation vollständig abgeschlossen ist. Das Entfernen der Fade-Klasse aus dem Modal kann hilfreich sein.
EvilPuppetMaster
7
$ ('. modal-backdrop'). remove (); hat es für mich gelöst, keine Notwendigkeit, die Fade-Klasse zu entfernen
Omar S.
34
$('.modal-backdrop').remove()scheint zukünftige Modalitäten richtig zu öffnen.
Rock
65

Stellen Sie sicher, dass Ihr erster Aufruf zur $.modal()Anwendung des modalen Verhaltens nicht mehr Elemente als beabsichtigt übergibt. In diesem Fall wird eine modale Instanz mit Hintergrundelement für JEDES Element in der Sammlung erstellt. Folglich könnte es so aussehen, als wäre der Hintergrund zurückgelassen worden, wenn Sie tatsächlich eines der Duplikate betrachten.

In meinem Fall habe ich versucht, den modalen Inhalt im laufenden Betrieb mit einem Code wie dem folgenden zu erstellen:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Hier bedeutete der HTML-Kommentar nach dem schließenden </div>Tag, dass myModal tatsächlich eine jQuery-Sammlung von zwei Elementen war - dem div und dem Kommentar. Beide wurden pflichtbewusst in Modale verwandelt, jedes mit seinem eigenen Hintergrundelement. Natürlich war das aus dem Kommentar erstellte Modal abgesehen vom Hintergrund unsichtbar. Als ich das echte Modal (das Div) schloss, sah es so aus, als wäre der Hintergrund zurückgeblieben.

Gasman
quelle
16
Dieser Typ war auf dem Geld. Ich habe die Kommentare aus einem Modal entfernt, das ich mit $ .html () erhalten habe, und es funktioniert jetzt. Freakin 'komisch.
Matrym
2
Dies war auch für mich das Problem.
Bob Black
6
Blöder Bootstrap! Ihr eigenes Beispiel-Markup (mit den Kommentaren am Anfang und am Ende) bricht dieses Paradigma. Entfernen Sie den Kommentar und es funktioniert!
goofballLogic
Hier gilt das gleiche. Das Entfernen der Kommentare löste das Problem. Nur eine Frage. Ich sehe, dass das Modal perfekt funktioniert, ohne es mit $ ('body'). Append (myModal) zum DOM hinzuzufügen. Ist es erforderlich, das Modal zur Seite DOM hinzuzufügen?
VictorEspina
Ich hatte ein nicht übereinstimmendes Tag. Gleiches Ergebnis. Vielen Dank!
jozxyqk
51

Ich habe einfach viel zu lange mit diesem Problem verbracht :)

Obwohl die anderen Antworten hilfreich und gültig sind, schien es mir ein wenig chaotisch, die Funktion zum modalen Ausblenden von Bootstrap effektiv wiederherzustellen, sodass ich eine sauberere Lösung gefunden habe.

Das Problem ist, dass es eine Kette von Ereignissen gibt, die auftreten, wenn Sie anrufen

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Wenn Sie dann als Ergebnis der AJAX-Anforderung eine Reihe von HTML-Code ersetzen, werden die Ereignisse zum Ausblenden von Modalitäten nicht beendet. Bootstrap löst jedoch ein Ereignis aus, wenn alles fertig ist , und Sie können sich wie folgt daran anschließen :

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Hoffe das ist hilfreich!

Bill Huertas
quelle
15
Ich habe auch zu lange verbracht! Diese Antwort gab mir den Hinweis - etwas verstopfte mein DOM (eckig). Wenn Sie sich den Bootstrap-Code ansehen, können Sie einfach das sofortige Entfernen des Hintergrunds erzwingen, indem Sie zuerst die Fade-Klasse entfernen:$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Ross R
Das sollte die akzeptierte Antwort sein - es verwendet die Bootstrap-API wie beabsichtigt und hackt den Körper nicht mit .modal-open
Aaron Hudon
Dies ist die fleißigste und gewissenhafteste Antwort.
JacobIRR
Tolle Antwort, mein Problem war auch auf einen Ajax-Aufruf zurückzuführen, der den Dom ersetzte. Ich denke, Modal ('hide') gibt sich selbst oder die Modalreferenz zurück, damit wir an 'hidden.bs.modal' anhängen können.
Michael Harper
Die Aussage, dass die Modal-Hiding-Ereignisse nicht beendet sind, brachte mich auf die Idee, wie ich meine Arbeit beginnen soll
SamuelDev
32

Fügen Sie in Ihre Aktionsschaltfläche Folgendes ein:

data-backdrop="false"

und

data-dismiss="modal" 

Beispiel:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

Wenn Sie diesen Datenattr eingeben, wird der .modal-Hintergrund nicht angezeigt. Dokumentation dazu unter folgendem Link: http://getbootstrap.com/javascript/#modals-usage

Kampageddon
quelle
2
Dies ist eine wahre Antwort. Versuchen Sie unter keinen Umständen, die von Bootstrap beabsichtigten Aufgaben manuell auszuführen. Wenn das Ihre Lösung wäre, implementieren Sie sie falsch. Ich denke, das Boilerplate-HTML auf der Bootstrap-Site ist etwas unvollständig und deshalb erleben viele Leute das beschriebene Verhalten (einschließlich mir). Vielen Dank! +1
Ben Fransen
3
Was ist, wenn Sie das Modal nicht über eine Taste auslösen möchten?
Shinzou
7
@ben du liegst falsch. data-backdrop="false"ist einfach eine Option, die Bootstrap anweist, überhaupt keinen Hintergrund zu verwenden . Dies hat nichts mit dem eigentlichen Problem zu tun, es vermeidet es nur. Es wäre, als würde man sagen "Ich kann nicht schwimmen, also habe ich aufgehört, in den Pool zu steigen". Das ist cool, aber du kannst immer noch nicht schwimmen und wenn dein Chef dich in die Tiefe wirft, wirst du ertrinken. Es gibt viele Fälle, in denen manuelle Eingriffe erforderlich sind, z. B. wenn Angular im Hintergrund Ihrer App auf das DOM stampft.
Wesley Smith
18

Wenn Sie ein Kopieren und Einfügen von der getboostrap-Site selbst in einen von HTML generierten Selektor verwenden, müssen Sie den Kommentar '<! - /.modal ->' entfernen. Bootstrap wird verwirrt und denkt, dass der Kommentar ein zweites modales Element ist. Es wird ein weiterer Hintergrund für dieses "zweite" Element erstellt.

Jordanien
quelle
Ich werde verdammt sein ... das war genau mein Problem. Der Kommentar wurde entfernt und es hat funktioniert. Wie zum Teufel stolpert ein HTML-Kommentar über Bootstrap?
Turner Hayes
Ich glaube, es wird nach HTML-Elementen gesucht, um eine Zählung zu erhalten. Da Kommentare als Elemente betrachtet werden, ist diese Anzahl mit diesem Kommentar falsch.
Jordanien
ist mir passiert, als ich diese Datei in der Moustache-Vorlage hatte
Pavel 'PK' Kaminsky
Kommentare sind im DOM so vorhanden, dass die Javascript-Hälfte der modalen Komponente verwirrt wird. Ich vergesse wie genau. Das ist eine Weile her.
Jordanien
Holy Moley - das funktioniert tatsächlich! Das ist so ein komischer Fehler.
Dror S.
14

Ich weiß, dass dies ein sehr alter Beitrag ist, aber das könnte helfen. Dies ist eine sehr kleine Problemumgehung von mir

$('#myModal').trigger('click');

Das ist es, dies sollte das Problem lösen

Chaitanya Bankanhal
quelle
1
Das hat bei mir perfekt funktioniert. Verwenden Sie hier Bootstrap 4.
Eddie Teixeira
1
Dies sollte die Standardantwort sein. Vielen Dank
Makamu Evans
was myModalsoll sein Und warum sollte es den Dialog schließen? Modale Dialoge werden nur durch Klicken auf die Schaltfläche Schließen oder außerhalb des Dialogfelds geschlossen. Dies scheint keine Lösung zu sein.
MushyPeas
Was soll myModal sein? -> Es ist die ID des Hauptmodals. Und warum sollte es den Dialog schließen? -> Es funktioniert, weil die Aktion standardmäßig, wenn Sie auf die Außenseite des Modals klicken, an das übergeordnete Element weitergegeben wird und dort behandelt wird.
Chaitanya Bankanhal
9

Ich hatte ein ähnliches Problem: In meinem modalen Fenster habe ich zwei Schaltflächen: "Abbrechen" und "OK". Ursprünglich schlossen beide Schaltflächen das modale Fenster durch Aufrufen $('#myModal').modal('hide')(wobei "OK" zuvor Code ausführte), und das Szenario wäre das folgende:

  1. Öffnen Sie das modale Fenster
  2. Führen Sie einige Vorgänge aus, klicken Sie dann auf "OK", überprüfen Sie sie und schließen Sie das Modal
  3. Öffnen Sie das Modal erneut und schließen Sie es, indem Sie auf "Abbrechen" klicken.
  4. Öffnen Sie das Modal erneut und klicken Sie erneut auf "Abbrechen" ==> Der Hintergrund ist nicht mehr zugänglich!

Nun, mein Kollege am nächsten Schreibtisch hat mir den Tag gerettet: Anstatt aufzurufen $('#myModal').modal('hide'), geben Sie Ihren Schaltflächen das Attribut data-dismiss="modal"und fügen Sie Ihrer Schaltfläche "Senden" ein "Klick" -Ereignis hinzu. In meinem Problem lautet der HTML-Code (also TWIG) für die Schaltfläche:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

und in meinem JavaScript-Code habe ich:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

Während der Schaltfläche "Abbrechen" kein "Klick" -Ereignis zugeordnet ist. Das Modal wird jetzt ordnungsgemäß geschlossen und ich kann wieder mit der "normalen" Seite spielen. Es scheint tatsächlich, dass data-dismiss="modal"dies der einzige Weg sein sollte, um anzuzeigen, dass eine Schaltfläche (oder ein beliebiges DOM-Element) ein Bootstrap-Modal schließen sollte. Die .modal('hide')Methode scheint sich nicht ganz kontrollierbar zu verhalten.

Hoffe das hilft!

Dima Gabachov
quelle
Was ist hier, wenn Sie das Modal nicht über eine Schaltfläche auslösen möchten?
Shinzou
9

Dieses Problem kann auch auftreten, wenn Sie das modale Fenster zu schnell ausblenden und dann wieder anzeigen. Dies wurde an anderer Stelle zur Frage erwähnt, aber ich werde unten einige Details liefern.

Das Problem hat mit dem Timing und dem Fade-Übergang zu tun. Wenn Sie ein Modal anzeigen, bevor der Ausblendübergang für das vorherige Modal abgeschlossen ist, wird dieses anhaltende Hintergrundproblem angezeigt (der modale Hintergrund bleibt auf Ihre Weise auf dem Bildschirm). Bootstrap unterstützt explizit nicht mehrere Modalitäten gleichzeitig, aber dies scheint ein Problem zu sein, selbst wenn das Modal, das Sie verstecken, und das Modal, das Sie anzeigen, identisch sind.

Wenn dies der richtige Grund für Ihr Problem ist, finden Sie hier einige Optionen zur Minderung des Problems. Option 1 ist ein schneller und einfacher Test, um festzustellen, ob der Zeitpunkt des Überblendungsübergangs tatsächlich die Ursache für Ihr Problem ist.

  1. Deaktivieren Sie die Fade-Animation für das Modal (entfernen Sie die "Fade" -Klasse aus dem Dialogfeld).
  2. Aktualisieren Sie den Text des Modals, anstatt ihn auszublenden und erneut anzuzeigen.
  3. Korrigieren Sie das Timing so, dass das Modal erst angezeigt wird, wenn das vorherige Modal ausgeblendet ist. Verwenden Sie dazu die Ereignisse des Modals. http://getbootstrap.com/javascript/#modals-events

Hier sind einige verwandte Beiträge zum Bootstrap-Problem-Tracker. Es ist möglich, dass es mehr Tracker-Beiträge gibt, als ich unten aufgeführt habe.

Mark F. Guerra
quelle
8

.modal ('verstecken')

Versteckt manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das Ereignis hidden.bs.modal auftritt).

Also statt

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

tun

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Sie können also sicher warten, bis das "Verstecken" -Ereignis beendet ist.

Helmut Hackl
quelle
Dies ist definitiv eine bessere Lösung. Auf diese Weise müssen Sie sich nicht mit den Modalklassen herumschlagen, was wahrscheinlich der korrektere Weg ist, um dieses Problem zu beheben.
DeanMWake
6

Ein weiterer möglicher Fehler, der dieses Problem verursachen könnte,

Stellen Sie sicher, dass Sie das bootstrap.jsSkript nicht mehr als einmal in Ihre Seite aufgenommen haben!

Webinan
quelle
5

Selbst wenn ich auf ein ähnliches Problem stieß, hatte ich die folgenden zwei Tasten

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Ich wollte eine Ajax-Operation durchführen und nach Erfolg dieser Ajax-Operation das Modal schließen. Also hier ist was ich getan habe.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Ich habe das Klickereignis der Schaltfläche "Nein" ausgelöst, die die data-dismiss="modal"Eigenschaft hatte. Und das hat funktioniert :)

Yasser Shaikh
quelle
Das manuelle Auslösen eines Klickereignisses schließt das Modal in IE9 / IE10 für mich nicht. Ich versuche eine Lösung zu finden.
Antony Harder
Trotzdem war das Problem etwas anders - ich hatte eine Datenaktivierungsbedingung an diese Schaltfläche angehängt, und obwohl der IE mit Onclick-Ereignissen fortfuhr, berücksichtigte er nicht das Datenentlassungsattr.
Antony Harder
5

verwenden:

$('.modal.in').modal('hide') 

Quelle

Jamshid Hashimi
quelle
3

Diese Lösung ist für Ruby on Rails 3.x und eine js.erb-Datei vorgesehen, die einen Teil des DOM einschließlich des Modals neu erstellt. Es funktioniert unabhängig davon, ob der Ajax-Aufruf vom Modal oder von einem anderen Teil der Seite kam.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Vielen Dank an @BillHuertas für den Startpunkt.

Mindriot
quelle
3

$ ('# myModal'). trigger ('click');

Das hat bei mir funktioniert. Es wird nicht geschlossen, da beim Öffnen des Popups 2 oder 3 modale Hintergründe ausgelöst werden. Wenn Sie also $ ('# myModal')) tun. Modal ('hide'); es wirkt sich nur auf einen modalen Hintergrund aus und es bleibt Ruhe.

Ashhab
quelle
2

Updatepanel-Problem.

Mein Problem war auf die Platzierung des Updatepanels zurückzuführen. Ich hatte das gesamte Modal im Updatepanel. Wenn Sie das Modal außerhalb des Update-Bereichs deklarieren und im Update-Bereich nur den Modal-Body angeben, dann das $ ('# myModalID'). Modal ('hide'); hat funktioniert.

Al Option
quelle
Das war mein Problem. Ich hatte einen AjaxManager, der Update-Panels um meine Benutzersteuerung erstellte, die das gesamte Modal enthielten. Ich habe nur den Körper des Modals in der Benutzersteuerung belassen und alles auf der Hauptseite verschoben, und alles begann wie erwartet zu funktionieren.
AlexanderD
2

Ein weiterer Gesichtspunkt zu dieser Frage. (Ich verwende die bootstrap.js Version 3.3.6)

Ich habe die Modalisierung von Modal sowohl manuell als auch in Javascript verwechselt:

$('#myModal').modal({
   keyboard: false
})

und mit

data-toggle="modal"

in dieser Schaltfläche wie im folgenden Beispiel (im Dokument gezeigt)

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

Das Ergebnis ist also, dass zwei Instanzen von erstellt werden

<div class="modal-backdrop fade in"></div>

beim Öffnen des Modals an den Text meines HTML anhängen. Dies kann die Ursache beim Schließen des Modals mithilfe der folgenden Funktion sein:

$('#myModal').modal('hide');

Es wird nur eine Hintergrundinstanz entfernt (wie oben gezeigt), damit der Hintergrund nicht verschwindet. Aber es ist verschwunden, wenn Sie data-dismiss="modal"Add-On-HTML als Show im Bootstrap-Dokument verwenden.

Die Lösung für mein Problem besteht also darin, Modal nur manuell in Javascript zu initialisieren und kein Datenattribut zu verwenden. Auf diese Weise kann ich das Modal sowohl manuell als auch mithilfe von data-dismiss="modal"Funktionen schließen.

Ich hoffe, dies hilft, wenn Sie auf dasselbe Problem wie ich stoßen.

Ohm89
quelle
2

Zu Ihrer Information, falls jemand noch darauf stößt ... Ich habe ungefähr 3 Stunden damit verbracht herauszufinden, dass der beste Weg, dies zu tun, wie folgt ist:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Diese Funktion zum Schließen des Modals ist sehr unintuitiv.

Nick M.
quelle
Lief wie am Schnürchen.
Pattu
2

Das Hinzufügen data-dismiss="modal"von Schaltflächen in meinem Modal hat bei mir funktioniert. Ich wollte, dass meine Taste eine Funktion mit Winkel aufruft, um einen Ajax-Aufruf auszulösen UND das Modal zu schließen, also fügte ich ein .toggle()innerhalb der Funktion hinzu und es funktionierte gut. (In meinem Fall habe ich einen bootstrap modalund einige verwendet angular, keinen tatsächlichen modalen Controller).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}
wendyg
quelle
1

Ich hatte das gleiche Problem. Ich habe festgestellt, dass dies auf einen Konflikt zwischen Bootstrap und JQueryUI zurückzuführen ist.

Beide verwenden die Klasse "close". Das Ändern der Klasse in der einen oder anderen Klasse behebt dies.

Matthew Andrianakos
quelle
1

Die Verwendung von Toggle anstelle von Hide löste mein Problem

Yash K.
quelle
1
teile eine mögliche Antwort (Beispiel). Es wird anderen helfen, gut zu verstehen
Sachith Muhandiram
1

Stellen Sie sicher, dass Sie nicht dieselbe Element-ID / Klasse für ein Element verwenden, das nicht mit der modalen Komponente zusammenhängt.

Das heißt, wenn Sie Ihre Schaltflächen, die die modalen Popups auslösen, mit dem Klassennamen 'myModal' identifizieren, stellen Sie sicher, dass keine nicht verwandten Elemente mit demselben Klassennamen vorhanden sind.

user2707674
quelle
1

Nach dem Anwenden der am besten bewerteten Lösung hatte ich das Problem, dass zukünftige Modalitäten ordnungsgemäß geöffnet werden. Ich habe meine Lösung gefunden, die gut funktioniert

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });
Rez
quelle
1

Ich hatte das gleiche Problem beim Versuch, das Formular einzureichen. Die Lösung bestand darin, den Schaltflächentyp von submitauf zu ändern buttonund dann das Schaltflächenklickereignis wie folgt zu behandeln:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}
sym
quelle
0

Im .net MVC4-Projekt hatte ich das modale Popup (Bootstrap 3.0) in einem Ajax.BeginForm (OnComplete = "addComplete" [zusätzlicher Code gelöscht]). Im "addComplete" -Javascript hatte ich den folgenden Code. Dies löste mein Problem.

$ ('# moreLotDPModal'). hide ();

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

$ ('. modal-backdrop'). remove ();

$ ('# moreLotDPModal'). removeClass ("in");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

JenonD
quelle
0

Ich hatte genau das gleiche Problem.

Ich habe jedoch bootbox.js verwendet, also könnte es etwas damit zu tun haben.

In beiden Fällen wurde mir klar, dass das Problem durch ein Element mit derselben Klasse wie das übergeordnete Element verursacht wurde. Wenn eines dieser Elemente verwendet wird, um eine Klickfunktion zu binden, um das Modal anzuzeigen, tritt das Problem auf.

dh dies ist der Grund für das Problem:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

Ändern Sie es so, dass das angeklickte Element nicht dieselbe Klasse wie das übergeordnete Element, eines seiner untergeordneten Elemente oder andere Vorfahren hat. Es ist wahrscheinlich eine gute Praxis, dies im Allgemeinen zu tun, wenn Sie Klickfunktionen binden.

Vin
quelle
0

Ich arbeite mit Meteor und habe gerade das gleiche Problem. Die Ursache meines Fehlers war folgende:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Wie Sie sehen können, habe ich das Modal im else hinzugefügt. Als mein Modal die Kontaktinformationen aktualisierte, hatte das if einen anderen Status. Dies führte dazu, dass die modale Vorlage kurz vor dem Schließen aus dem DOM entfernt wurde.

Die Lösung: Verschieben Sie das Modal aus dem if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}
Scuba Kay
quelle
0
//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

Geige -> https://jsfiddle.net/o6th7t1x/4/

Fábio Zangirolami
quelle
0

Der Anfangswert Ihres Datenhintergrundattributs kann sein

"statisch", "wahr", "falsch".

statisch und wahr fügen den modalen Schatten hinzu, während falsch den Schatten deaktiviert, sodass Sie diesen Wert nur mit dem ersten Klick auf falsch ändern müssen. so was:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Alejandro Quintero
quelle
0

Ich hatte das Problem mit dem Einfrieren des modalen Hintergrundbildschirms, aber in einem etwas anderen Szenario: Als 2 hintereinander liegende Modalitäten angezeigt wurden. Beispiel: Der erste würde um Bestätigung bitten, um etwas zu tun, und nachdem auf die Schaltfläche "Bestätigen" geklickt wurde, würde die Aktion auf einen Fehler stoßen und das zweite Modal würde angezeigt, um die Fehlermeldung anzuzeigen. Der 2. modale Hintergrund würde den Bildschirm einfrieren. Es gab keine Konflikte zwischen Klassennamen oder IDs der Elemente.

Das Problem wurde behoben, indem dem Browser genügend Zeit gegeben wurde, um sich mit dem modalen Hintergrund zu befassen. Anstatt die Aktion sofort nach dem Klicken auf "Bestätigen" auszuführen, geben Sie dem Browser 500 ms, um das erste Modal auszublenden und den Hintergrund usw. zu bereinigen. Führen Sie dann die Aktion aus, die dazu führen würde, dass das Fehlermodal angezeigt wird.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Die Funktion _dialogConfirmed () hat den folgenden Code:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Ich vermute, die anderen Lösungen haben funktioniert, weil sie genug zusätzliche Zeit in Anspruch genommen haben, um dem Browser die erforderliche Bereinigungszeit zu geben.

Behnam
quelle
0

Fügen Sie in ASP.NET nach dem Befehl jquery ein Update für UpdatePanel für den Code dahinter hinzu. Beispiel:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();
mathias.horn
quelle