Das perfekte Popup

Key Takeaways

• Popup-Fenster können effektiv und nicht invasiv verwendet werden, sofern sie korrekt implementiert werden. Zu den allgemeinen Fehlern gehören Probleme mit Skripten, Suchmaschinen, Zugänglichkeit, Site-Management-Tools, Pop-up-Kildern und Optionen, um Pop-ups vom Öffnen zu verhindern.
• Um ein perfektes Pop-up zu erstellen, sollten Sie eine Funktion verwenden, die in einem häufig vorgeschriebenen JavaScript-Code platziert werden kann. Diese Funktion kann leicht von überall auf der Website aufgerufen werden, und es ist eher vorzuziehen, als jedes Mal das Fenster zu schreiben. Open -Funktion. Die Funktion sollte den Fokusaspekt bewältigen, den Zustand des Popups bewerten, das Popup-Fenster schließen und mit seinen neuen Dimensionen wieder eröffnen.
• Es ist wichtig, einen Link oder eine Schaltfläche im Popup-Fenster selbst bereitzustellen, damit Benutzer ihn schließen können. Wenn der Benutzer jedoch Scripting deaktiviert hat, sollte der Link "dieses Fenster schließen" mithilfe von JavaScript auf die Webseite geschrieben werden, und überprüfen Sie, ob das Fenster als Teil einer Fenster (Open () -Methode geöffnet wurde. Wenn es sich um ein echtes Pop-up handelt, erscheint der Link und die Methode close () funktioniert; Wenn es sich nicht um ein echtes Popup-Fenster handelt, wird der Link nicht angezeigt.

Wenn Sie den Likes wie Jakob Neilsen und seinen Anhängern glauben, ist nichts böser als Popup-Fenster. Und in vielerlei Hinsicht ist dies richtig. Warum? Nun, wir werden die Gründe früh genug auflisten, aber hier liegt es daran, dass sie fast immer schlecht umgesetzt oder einfach nicht benötigt werden. Dieses Tutorial zeigt, dass Pop-up-Fenster mit dem richtigen Gedanken verwendet werden können, ohne jemanden zu verärgern-insbesondere die Person, die Ihre Website stöbert.

Probleme mit Pop-ups

Die üblichen Fehler mit Pop-up-Fenstern sind:

• Wenn das Scripting deaktiviert ist oder wenn der Browser JavaScript nicht unterstützt, funktioniert das Popup nicht
• Suchmaschinen können Links nicht zu Popup-Fenstern folgen (Skriptelemente werden immer ignoriert)
• Pop-ups präsentieren Zugänglichkeitsprobleme
• Site-Management-Tools (z. B. Dreamweaver) können Links zu Popups nicht aktualisieren, wenn Sie die Zielseite in einen anderen Abschnitt Ihrer Website verschieben
• Viele Menschen haben Pop-up
• In Mozilla gibt es die Möglichkeit, Popups zu verhindern, dass er sich überhaupt öffnet

Puh. Das ist eine ziemliche Liste ... und Sie könnten diese Liste wahrscheinlich hinzufügen. Also, wie gehen wir diese an?

Scripting deaktiviert

Bei deaktiviertem Skriptumschreiber macht das Popup nichts. Einfach das. Wenn Sie jedoch einen Standard verwenden, würde es kein solches Problem geben. Also anstatt:

zu verwenden

<a href="#" onclick="window.open('file.htm');"> 

Sie könnten verwenden:

<a href="file.htm" onclick="window.open('file.htm');return false;">

Auf diese Weise funktioniert der Standard -Link, wenn das Skripting deaktiviert ist, weiterhin.

Vielleicht gibt es jedoch einen sehr guten Grund, warum das Fenster oben im aktuellen Fenster geöffnet werden soll. Wenn ja, fügen Sie einfach ein Zielattribut wie SO hinzu:

<a href="#" onclick="window.open('file.htm');"> 

Bingo. Problem gelöst. Aber wir können das noch tun!

Suchmaschinen

Mit dem obigen geänderten Code erhalten Suchmaschinen einen Standard -HREF, der folgt. Dies ist ein weiteres Problem, das unsere Problemliste abgeholt hat.

Zugänglichkeitsprobleme

Der größte Fehler an Pop-ups ist, dass sie den Fokus aus dem Hauptbrowserfenster nehmen, und dies kann beunruhigend sein. Sie präsentieren auch allgemeine Usability -Probleme, abgesehen von der Zugänglichkeit. Wie oft haben Sie jemanden gesehen, der ein Pop-up gestartet und dann versehentlich auf das Launcher-Fenster zurückklickt und dachte, dass nichts passiert ist, klicken Sie ohne Ergebnis erneut auf den Link? Natürlich hat sich das Fenster geöffnet, aber es befindet sich jetzt unter dem Launcher-Fenster, und nur in die Taskleiste hinunterzuziehen und das Fenster von dort auszuwählen, wird dies lösen.

Der Trick besteht darin, den Benutzer darüber zu informieren, dass der Link in einem neuen Fenster geöffnet wird. Es gibt eine Reihe von Möglichkeiten, um dies anzugehen:

• Einfügen von Anweisungen als Teil des Links selbst einbeziehen
• Fügen Sie in einem Titelattribut einige Anweisungen hinzu
• Verwenden Sie ein geeignetes Symbol, um ein Popup zu bedeuten

Auf diese Weise kann der Benutzer beispielsweise die Verbindung herstellen, wenn der Fokus verloren geht, beispielsweise die Verbindung herstellen:

Öffnen Sie meine Testseite (öffnet sich in einem Popup-Fenster)

Öffnen Sie meine Testseite

Um sich mit dem Problem zu befassen, den Fokus auf das Hauptfenster zu verlieren, können Sie JavaScript verwenden, um den Fokus neu zu stecken. Ein vorgeschlagenes Skript dafür erscheint am Ende dieses Artikels.

Site -Link -Management -Tools

Wenn Sie die Angewohnheit haben, Seiten zu bewegen, um Tools wie Dreamweaver oder ein Content -Management -System zu verwenden, hoffen Sie, dass Links aufrechterhalten werden. Bei Standard -HREFs sind sie normalerweise (abhängig von dem Tool, das Sie verwenden), aber mit JavaScript ist es unwahrscheinlich. Für einen Moment zu unserem Code zurückkehren:

<a href="file.htm" onclick="window.open('file.htm');return false;">

Der obige Link würde ziemlich gut aufrechterhalten werden… fast. Die Hälfte davon würde - der Href -Teil. Aber der Onclick -Teil würde wahrscheinlich ignoriert werden. Das ist ein großes Problem. Sie denken vielleicht, dass Ihre Links aktualisiert wurden, aber tatsächlich werden Personen, die JavaScript aktiviert haben, an eine fehlende Seite gesendet. Möglicherweise werden Sie feststellen, dass Ihr Code in:

geändert wird

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

und wenn Sie einen Link -Validator auf der Startseite ausführen, scheint es, dass Ihr Link tatsächlich gültig ist. Wie gehen wir dieses Problem an? Gefällt mir:

<a href="file.htm" onclick="window.open('file.htm');  <br>
return false;">

Es gibt nur einen Link zum Wartung, und das richtige HREF wird für die Methode "Fenster.open" verwendet. Ausgezeichnet â € »Jetzt kommen wir irgendwohin!

Pop-up-Killer/Mozilla Deaktivieren Sie Popups

Wie bei der Deaktivierung von JavaScript bedeutet dies lediglich ein Standard -HREF, dass der Link weiterhin funktioniert. Jetzt müssen wir uns nur mit dem Problem befassen, welches Fenster Fokus hat…

Das perfekte Popup-Skript

Wir empfehlen, eine Funktion zu verwenden, die in einem häufig vorgeschriebenen JavaScript-Code (wie wir mit dieser Site) platziert werden können und die leicht von überall auf der Site von überall auf der Website aufgerufen werden kann. Dies ist weitaus vorzuziehen, als jedes Mal das Fenster zu schreiben. Open -Funktion. Zusätzlich zur URL möchten Sie möglicherweise Parameter wie Größe und Breite und welche Art von Popup-Stil zu wählen (es liegt an Ihnen, welche Stile Sie definieren).

Hier ist der Code, den ich empfehle:

<a href="#" onclick="window.open('file.htm');"> 

Der zusätzliche Code in der Funktion übernimmt den Fokusaspekt. Wenn Sie auf einen Link klicken, der diese Funktion aufruft, klicken Sie auf die Seite zurück, damit das Popup versteckt ist, und klicken Sie dann auf einen anderen Popup-Link, der Code bewertet den Status des Popups, schließt das Popup-Fenster und eröffnet ihn mit seinen neuen Dimensionen erneut.

Um die Funktion aufzurufen, verwenden Sie den folgenden Code:

<a href="file.htm" onclick="window.open('file.htm');return false;">

oder um einige tatsächliche Beispiele zu verwenden:

dies ist mein Popup-Link (Konsolenmodus)
Das ist mein Popup (fester Modus)
Das ist mein (elastischer Modus)

HINWEIS: Der Teil "false zurückgeben" stellt die Standardaktion des HREF effektiv aus, sodass er das Popup und ein normales HTML-Fenster nicht öffnet-es öffnet das eine oder andere. Probieren Sie die obigen Links mit und ohne JavaScript -ermöglicht, um sich selbst zu erkennen.

Was könnten Sie mehr wünschen? Nun ... es gibt ein letztes Stück Sahnehäubchen auf diesem Kuchen.

Schließen Sie das Popup

Sobald das Popup geöffnet ist, können wir uns möglicherweise darauf verlassen, dass Menschen mit den Browser-/Betriebssystemsteuerungen das neu geöffnete Fenster schließen.

Aber die Leute tun das nicht immer! Daher sollten wir im Popup-Fenster selbst einen Link (oder eine Schaltfläche) angeben, damit Benutzer ihn schließen können. Nehmen wir jedoch an, dass unser Benutzer Scripting deaktiviert hat und dass das Popup-Fenster über die Standard-HREF-Route geöffnet wurde. Der Link "diesen Fenster schließen", den Sie so nachdenklich bereitgestellt haben

Um dieses Problem zu umgehen, sollten Sie mit JavaScript den Link schließen zur Webseite schreiben und überprüfen, ob das Fenster als Teil eines Fensters geöffnet wurde. Open () Methode. Auf diese Weise erscheint der Link, wenn es sich um ein echtes Popup handelt, und die Methode von Close () funktioniert. Wenn es sich nicht um ein echtes Popup-Fenster handelt, wird der Link nicht angezeigt.

Hier ist der Code, um dies zu tun:

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

Versuchen Sie den Link erneut und überzeugen Sie sich selbst:

dies ist mein Popup (fester Modus)

Schlussfolgerung

hoffentlich hat dieses Tutorial gezeigt, dass Popup-Links zugänglich, suchgügendes freundlich und nicht-invasiv sein können. Selbst wenn Sie all diesen Rat befolgen, sollten Sie sich dennoch fragen, ob Sie wirklich ein neues Fenster öffnen müssen.

Ein letzter Punkt ist zu beachten, dass Pop-ups etwas sein sollten, das die Leute verwenden sollten. Verwenden Sie also kein Fenster. OneLoad oder Fenster. Das nervt die Menschen immer wieder heraus… es sei denn, sie wollten eine X10 -Kamera kaufen oder das „größte Online -Casino der Welt“ besuchen, wusste es aber nicht, das heißt!

Das obige ist der detaillierte Inhalt vonDas perfekte Popup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!