Schnelltip: Modal Popup nach Zeitverzögerung anzeigen

In diesem Artikel wird erläutert, wie JavaScript verwendet wird, um ein modales Fenster nach einer kurzen Verzögerung anzuzeigen, eine Technik, die manchmal für Handlungsaufrufe oder Werbung verwendet wird. Der Autor warnt vor Überbeanspruchung, da dies die Benutzererfahrung negativ beeinflussen kann.

Das Beispiel verwendet das Colorbox -Plugin (erfordert JQuery) und setTimeout(), um das Modal nach einer angegebenen Verzögerung (in Millisekunden) auszulösen. Der Artikel betont die Zugänglichkeit und schlägt vor, sich auf das Modal beim Öffnen und Wiederherstellung des Fokus auf das vorherige Element beim Schließen zu konzentrieren. Um die Benutzerfreundlichkeit zu verbessern, wird empfohlen, den Modal nur einmal alle paar Stunden oder Tage mit Cookies zu zeigen, um das Display zu verfolgen.

Implementierungsdetails:

Der Code enthält:

• jQuery und Colorbox: Für die Erstellung und Verwaltung der Modalfenster. Der Artikel enthält Code -Snippets, um diese Bibliotheken über CDNs aufzunehmen.
• setTimeout(): , um die Verzögerung zu steuern, bevor das Modal erscheint.
• $.colorbox(): , um den Colorbox -Modal direkt anzuzeigen, HTML -Inhalt, Klassennamen für das Styling und Dimensionen angeben.
• onComplete und onClosed Ereignisse: , um die Fokusmanagement (mithilfe der Methode focus()) zu verarbeiten und den Fokus nach dem Schließen wiederherzustellen.
• js-cookie: zum Einstellen und Überprüfen von Cookies, um die Frequenz der modalen Anzeige zu steuern.

Der Artikel enthält ein vollständiges, funktionierendes Beispiel für CodePen, das demonstriert, wie ein Cookie für die Begrenzung der Anzeigefrequenz und die Verwaltung des Fokus festgelegt wird. Es befasst sich auch mit häufigen Fragen zu Zeitverzögerungen, Browserkompatibilität und alternativen Methoden. Der FAQ -Abschnitt deckt verschiedene Aspekte der Implementierung zeitgesteuerter modaler Popups ab, einschließlich der Verwendung von Bootstrap und Löschen von Zeitüberschreitungen.

Das obige ist der detaillierte Inhalt vonSchnelltip: Modal Popup nach Zeitverzögerung anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!