/ / Stubborn modal verbb wird nicht verblassen - zurb-foundation

Hartnäckiges Zurb-Modal wird nicht verblassen - zurb-foundation

Ich wechsle zwischen zwei Modalitäten. Das erste Modal enthält eine Schaltfläche, die diese Funktion aufruft:

function teamControl(action) {
$("#teamControlsModal").foundation("reveal", "close");

if (action == "create") {
$("#teamFlavorText").html("Create a Team");
loadBusinessInfoSelectBox("businessSize");
loadBusinessInfoSelectBox("businessType");
loadBusinessInfoSelectBox("businessLocation");
$("#createTeamModal").foundation("reveal", "open");
}
}

Was wiederum das folgende Modal öffnet:

<div id="createTeamModal" class="reveal-modal">
<form id="createTeamForm" style="width: 480px; margin: auto;"
novalidate="novalidate"></form>
<a class="close-reveal-modal">×</a>
</div>

Aber wenn ich auf das X klicke, um das zweite Modal zu schließen, verschwindet das Modal selbst, aber der Bildschirm bleibt ausgegraut. Kein JavaScript-Fehler überhaupt.

Irgendwelche Ideen?

Antworten:

1 für die Antwort № 1

Ich habe vorher ein anderes Modal gezeigt

Das ist ein Fehler in V3 und ich habe ihn in V4 nicht gefunden, einfach weil ich denselben Ansatz beim Schließen meiner Mods in V3 implementiert habe. Das ist, was ich für V3 habe:

function closeModals() {
$(".reveal-modal").trigger("reveal:close");
}

Das stellt sicher, dass ich keine Mods offen habe, bevor ich noch eins mache. In V4 habe ich folgendes:

function closeModals() {
$(".reveal-modal").foundation("reveal", "close");
}

Ich bin diesem Thema nie wieder begegnet.


1 für die Antwort № 2

Hier ist die eigentliche Lösung für dieses Problem:

Bearbeiten Sie foundation.reveal.js. Fügen Sie am Ende der Schließfunktion die folgende Zeile ein.

this.hide(this.settings.bg);

0 für die Antwort № 3

Ich musste diese Arbeit asyncieren, weil die Funktion des Onclick vom ersten Modal das zweite Modal öffnete und verhinderte, dass sich das erste Modal sauber schloss.

var openModal;

function teamControl(action) {
$("#teamControlsModal").foundation("reveal", "close");

if (action === "create") {
$("#teamFlavorText").html("Create a Team");
loadBusinessInfoSelectBox("businessSize");
loadBusinessInfoSelectBox("businessType");
loadBusinessInfoSelectBox("businessLocation");
//$("#createTeamModal").foundation("reveal", "open");
openModal = "createTeamModal";
}
}

function asyncModalOpen() {
if (openModal !== "") {
$("#" + openModal).foundation("reveal", "open");
openModal = "";
}
}

function highFreqTimer() {
asyncModalOpen();
}

HTML:

<script type="text/javascript">
setInterval("highFreqTimer()", 500);
</script>