Ich habe ein modales Bootstrap-Dialogfeld, das ich zunächst anzeigen möchte. Wenn der Benutzer dann auf die Seite klickt, wird es ausgeblendet. Ich habe folgendes:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
Das Modal wird anfangs angezeigt, schließt jedoch nicht, wenn Sie außerhalb des Modals klicken. Außerdem ist der Inhaltsbereich nicht ausgegraut. Wie kann ich das Modal zunächst anzeigen lassen und dann schließen, nachdem der Benutzer außerhalb des Bereichs geklickt hat? Und wie kann ich den Hintergrund wie in der Demo abblenden lassen?
jquery
twitter-bootstrap
modal-dialog
Nick B.
quelle
quelle
$("#yourModal").modal()
oder$('.modal').modal()
?Antworten:
Setzen
modal('toggle')
stattmodal(toggle)
quelle
Um das Bootstrap- Modal zu schließen , können Sie 'hide' als Option an die Modal-Methode wie folgt übergeben
Bitte werfen Sie hier einen Blick auf die funktionierende Geige
Bootstrap bietet auch Ereignisse, die Sie in die modale Funktionalität einbinden können. Wenn Sie beispielsweise ein Ereignis auslösen möchten, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist , können Sie das Ereignis hidden.bs.modal verwenden. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in Dokumentation
Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schaltfläche zum Schließen eine ID und lösen Sie einen Klick auf die Schaltfläche zum Schließen aus.
quelle
toggle
behält die Überlagerung und ist keine Lösung. Sie sollten immer entwedershow
oder verwendenhide
.oder
sollte arbeiten.
Wenn nichts anderes funktioniert, können Sie die Schaltfläche zum Schließen des Modals direkt aufrufen:
quelle
$('#modal').modal('hide')
aber ich kann es mit schließen,$('#modal').modal('toggle')
aber das zeigt eine vertikale Bildlaufleiste nach dem Schließen. Also für mich$('#modal').hide()
hat es perfekt funktioniert, aber ich möchte wissen, ob das irgendwelche Probleme verursachen würde? Und ich codiere innen,$('#modal .close').click()
also glaube ich nicht, dass ich es verwenden könnte, um Modal zu schließen.das hat bei mir funktioniert:
Verwenden Sie diesen Link modal schließen
quelle
Das Ausführen dieses Aufrufs über die Klasse
($(".my-modal"))
funktioniert nicht.quelle
Versuche dies
quelle
Dieser ist ziemlich gut und funktioniert auch in Winkel 2
quelle
$('#modal').modal('toggle');
hat das keine Wirkung.Meine fünf Cent in diesem Fall sind, dass ich nicht auf das Bootstrap-Modal mit einer ID abzielen möchte und da es jeweils nur ein Modal geben sollte, sollte das Folgende völlig ausreichen, um das Modal zu entfernen, da das Umschalten gefährlich sein könnte ::
quelle
<body>
Klassen, wurden Klassen hinzugefügt, die ebenfalls zurückgesetzt werden müssten. Die beste Antwort ist die Verwendung der'hide'
Methode.Unter bestimmten Umständen kann ein Tippfehler der Schuldige sein. Stellen Sie zum Beispiel sicher, dass Sie:
und nicht
Beachten Sie das doppelte "ss" im zweiten Beispiel, das dazu führt, dass die Schaltfläche "Schließen" fehlschlägt.
quelle
Wir können das modale Popup auf folgende Arten schließen:
quelle
$('.modal.in').modal('hide');
Verwenden Sie den obigen Code, um den Hintergrund von Modal auszublenden, wenn Sie mehrere Modal-Pops auf einer Seite verwenden.
quelle
$('.modal').modal('hide');
.quelle
quelle
$('#DeleteModal').modal('hide');
relevant ist?Sie können verwenden;
quelle
Die Verwendung von modal.hide würde nur das Modal ausblenden. Wenn Sie Overlay unter dem Modal verwenden, ist es immer noch vorhanden. Verwenden Sie Click Call, um das Modal tatsächlich zu schließen und das Overlay zu entfernen.
quelle
Eine andere Möglichkeit besteht darin, zuerst die Klasse modal-open zu entfernen, wodurch das Modal geschlossen wird. Dann entfernen Sie den Klassen-Modal-Hintergrund, der die graue Abdeckung des Modals entfernt.
Der folgende Code kann verwendet werden:
quelle
Fügen Sie eine Schaltfläche in modal mit hinzu
data-dismiss="modal"
und verbergen Sie die Schaltfläche mitdisplay: none
. So wird es aussehenWenn Sie nun Modal Programmatisch schließen möchten, lösen Sie einfach ein Klickereignis auf dieser Schaltfläche aus, das für den Benutzer nicht sichtbar ist
In Javascript können Sie einen Klick auf diese Schaltfläche wie folgt auslösen:
quelle
Dieser Code hat perfekt funktioniert, um ein Modal zu schließen (ich verwende Bootstrap 3.3).
quelle
In meinem Fall reagierte die Hauptseite, von der aus das Bootstrap-Modal ausgelöst wurde, nach der Verwendung von
$("#modal").modal('toggle');
way nicht mehr, sondern auf folgende Weise:quelle
Das funktioniert gut
Wenn jedoch mehrere Modale übereinander gestapelt sind, ist dies nicht effektiv. Stattdessen funktioniert dies
quelle
Nach einigen Tests stellte ich fest, dass für das Bootstrap-Modal einige Zeit gewartet werden muss, bevor das
$(.modal).modal('hide')
nach dem Ausführen ausgeführt wird$(.modal).modal('show')
. Und ich fand in meinem Fall, dass ich mindestens 500 Millisekunden Intervall zwischen den beiden brauche.Das ist also mein Testfall und meine Lösung:
quelle
Sie können diese Referenz sehen, aber wenn dieser Link entfernt wurde, lesen Sie diese Beschreibung:
Rufen Sie ein Modal mit der ID myModal mit einer einzelnen Zeile JavaScript auf:
Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an , wie in data-background = "" .
Methoden
.modal (Optionen)
Aktiviert Ihren Inhalt als Modal. Akzeptiert ein optionales Optionsobjekt.
.modal ('umschalten')
Schaltet ein Modal manuell um. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das Ereignis "used.bs.modal" oder "hidden.bs.modal" auftritt).
.modal ('show')
Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich angezeigt wurde (dh bevor das Ereignis "used.bs.modal" auftritt).
.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).
.modal ('handleUpdate')
Passen Sie die Position des Modals manuell neu an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (dh falls eine Bildlaufleiste angezeigt wird).
.modal ('entsorgen')
Zerstört das Modal eines Elements.
Veranstaltungen
Die modale Klasse von Bootstrap macht einige Ereignisse sichtbar, um sich in die modale Funktionalität einzubinden. Alle Modalereignisse werden auf das Modal selbst (dh auf das **) ausgelöst. Typ Beschreibung
quelle
Außerdem können Sie auf ein 'x' "klicken", wodurch der Dialog geschlossen wird. Z.B:
$(".ui-dialog-titlebar-close").click();
quelle
In meinem Fall habe ich eine Schaltfläche verwendet, um das Modal anzuzeigen
Um das Modal (das die ID = 'my-modal-to-show' hat) in meinem Code zu schließen, rufe ich diese Funktion auf (in Angular Typoskript):
Wenn ich $ (modalId) .modal ('hide') aufrufe, funktioniert es nicht und ich weiß nicht warum
PS.: In meinem Modal habe ich dieses Button-Element auch mit der .close-Klasse codiert
quelle
Manchmal funktioniert die Lösung nicht, so dass Sie die In-Klasse ordnungsgemäß entfernen und die CSS-Anzeige hinzufügen müssen: keine manuell.
quelle