Foundation Reveal Modal und HTML5 Geschichte API-Manipulation - zurb-foundation

Ich versuche ein Problem mit Modals zu lösen. Ich möchte dem Benutzer ermöglichen, auf die Zurück-Schaltfläche des Browsers zu klicken, um ein Modal zu verwerfen und zum ursprünglichen Zustand der Seite zurückzukehren, also ohne Modal. Zu diesem Zweck habe ich über die HTML 5-History-API nachgedacht.

Ich habe angefangen, einen Querystring-Parameter an die URL anzuhängen, wie z http://...page.html?show_modal=[yes|no] Aber ich habe diesen Ansatz verlassen, weil ich nicht mit all den Dingen umgehen konnte, die mich betreffen popstate Veranstaltung, Seitenschau Event, etc. Ich konnte es nicht funktionieren lassen und es hat mich überwältigt.

Dann versuchte ich mit einem einfacheren Ansatz, bei dem ein Hash an die URL angehängt wurde, wie z http://...page.html#modal, und das Hashwechsel Veranstaltung. Dieser Ansatz funktioniert besser für mich und ich habe es fast schon.

Wenn der Benutzer auf die Schaltfläche klickt, wird das Symbol angezeigtmodal, kann er oder sie auf den Zurück-Knopf des Browsers klicken und es wird das Modal entlassen. Darüber hinaus kann der Benutzer danach auf den Vorwärts-Knopf des Browsers klicken und es wird wieder das Modal angezeigt. Sehr schön! Der Benutzer kann auch direkt zu der URL mit dem Hash navigieren, um direkt auf diesen Zustand der Seite zuzugreifen, und er kann einen solchen Zustand der Seite mit einem Lesezeichen versehen. Es funktioniert ziemlich ordentlich und ich bin ziemlich zufrieden mit den Ergebnissen.

Das Problem ist, dass es nicht vollständig funktioniertperfekt. Wenn der Benutzer das Modal durch Klicken auf den Hintergrund, die ESC-Taste oder das X in der oberen rechten Ecke schließt, beginnt der Verlauf zu versauen. Probieren Sie es aus: Öffnen Sie das Modal, indem Sie auf die Schaltfläche klicken, klicken Sie auf den Hintergrund, um es zu schließen (schauen Sie die URL in der Adressleiste an, das erste Problem ist hier, dass der Hash nicht entfernt wird), dann klicken Sie auf Ihren Browser zurück und Sie werde sehen, dass es nicht richtig funktioniert. Sie werden mit einem Duplikat in Ihrem Verlauf enden und Sie müssen zweimal auf die Zurück-Schaltfläche klicken, um zur vorherigen Seite zu gelangen. Dies ist aus UX-Sicht nicht wünschenswert. Kennt jemand eine Lösung dafür?

Ich stelle meinen Code in diesem bereit CodePen und am Ende dieser Frage. Ich schlage vor, es in Ihrer eigenen Maschine und NICHT IN Codepen zu versuchen, also können Sie den Hasch in der URL, etc. anzeigen. Es funktioniert auch nicht im Vollmodus von Kodepen, ich weiß nicht warum.

Vielen Dank!!

Ich benutze Foundation 5.2.1

<div class="row">
<div class="small-12 columns">
<h1>Reveal Modal</h1>
<h2>Manipulation of the browser history for a better UX</h2>
<a class="button radius" href="#" data-reveal-id="sampleModal" id="button">Show Modal...</a>
</div>
</div>
<!-- ############# -->
<!--     MODAL     -->
<!-- ############# -->
<div id="sampleModal" class="reveal-modal medium" data-reveal>
<h2>Hi!</h2>
<p>You may think you are on a new page now, but you aren"t. Try to click your browser <kbd>Back</kbd> button to dismiss this modal and return to the the page you were viewing.</p>
<a class="close-reveal-modal">&times;</a>
</div>

JavaScript

function setModalHash(url, present) {
var a = $("<a>", { href:url } )[0]; // http://tutorialzine.com/2013/07/quick-tip-parse-urls/
var newHash = "";
if (present === true) {
newHash = "#modal";
}
// Build the resulting URL
result = a.protocol + "//" + a.hostname + ":" + a.port + a.pathname + a.search + newHash;

return result;
}

$("#button").on("click", function() {
history.pushState(null, null, setModalHash(document.URL, true));
});

$(window).on("hashchange load",function(e) {
// Handling also the load event allows navigation directly to http://host/path/to/file#modal and bookmarking it
if (document.location.hash == "#modal") {
$("#sampleModal").foundation("reveal","open");
}
else {
$("#sampleModal").foundation("reveal","close");
}
});

Antworten:

0 für die Antwort № 1

Ich habe die Geschichte api / Geschichte durcheinandergebracht.js in Kombination mit dem Sitzungsspeicher, um den modalen Status zu erhalten, und open / close basierend auf der Benutzernavigation. Ich habe schließlich 90% meines Ziels erreicht, aber die Geschichte ist in Safari und iOS Safari sehr schlecht implementiert, also entferne die Funktionen für diese Browser.

Einige der Probleme, mit denen Sie möglicherweise konfrontiert werdenDer Hash-Ansatz besteht darin, dass bei Verwendung von # mit Pushstate ein neues Objekt tatsächlich nicht in den Verlaufsstatus verschoben wird. Manchmal scheint es den Verlauf auf den Stapel zu schieben und Sie könnten mit history.back () einen Popstate auslösen Wenn Sie sagen, dass Sie die Seite mit Ihrem Hashurl aktualisieren und eine Art Hash-Überprüfung auf Seiteninitiierung durchführen, scheint keine neue Historie auf den Stack zu gelangen, und daher verlässt der Benutzer die Rückwärts-Navigation als das Modal zu schließen.

Hier ist meine Implementierung, die für alle Browser funktioniert, außer wenn sie auf normales Verhalten zurückgreift: Safari:

http://dtothefp.github.io/hosted_modal_history_sample/ https://github.com/dtothefp/html5history_express_modal_toggle

Wie ich schon sagte, verwende ich Geschichte.js in Kombination mit sessionstorage, weil genervt genug, in der Popstate zum Schließen des modalen das History-Objekt entfernt wird, das ist genau, wenn ich es brauchen würde. Insgesamt eine sehr schlecht implementierte API.

Ich ändere die URL nicht, weil dieses Projekt funktioniertkein Backend, also wenn ich die URL ohne Hash ändere, würde die Seite bei einer Seitenaktualisierung nicht gefunden werden. Eine alternative Implementierung wäre eine Abfragezeichenfolge, die den Verlauf korrekt aktualisiert, wenn sie im Pushstate verwendet wird, aber schlechtes UX ist, wenn der Benutzer das Modal schließt, ohne die Rückwärtsnavigation zu verwenden (dh die Abbrechen-Schaltfläche zu drücken oder aus) Die Abfragezeichenfolge würde zu einer Seitenaktualisierung führen.