Einfaches Popup-Fenster-CSS. So erstellen Sie ein modales Fenster in CSS. jQuery-Plugin „ToastMessage“

Im Artikel über das Erstellen eines modalen Fensters mit CSS haben wir untersucht, was ein modales Fenster ist und warum es benötigt wird. Wir haben auch ein Fenster nur mit CSS erstellt. In diesem Artikel beschreibe ich, wie man ein modales Javascript-Fenster erstellt. Genauer gesagt verwenden wir zum Erstellen die JQuery-Bibliothek.

Beginnen wir also mit der Erstellung eines modalen Fensters in JQuery. Um das Problem zu verkomplizieren, stellen wir die folgende Bedingung ein. Wir müssen ein reaktionsfähiges modales Fenster erstellen. Und die Anpassungsfähigkeit besteht darin, dass mit abnehmender Bildschirmgröße auch das Fenster kleiner wird. Beginnen wir mit der Erstellung eines adaptiven modalen JQuery-Fensters mit HTML-Markup.

Klicken Sie hier! X Fordern Sie einen Anruf an

Ich denke, mit dem Code ist alles klar. Wir haben einen wrapper.wrapper, in dem sich der Inhalt unserer Website befindet. Es gibt eine Schaltfläche zum Aufrufen eines modalen Fensters mit der ID gowindow, das Fenster selbst mit der ID modal_window und eine darüber liegende Ebene myoverlay. Jetzt schreiben wir CSS-Stile.

Wraper ( width: 100 %; margin: auto; width: auto;/*same as 100 %*/ max-width: 960px;/*maximale Wrapper-Breite*/ border: 1px solid #000; background-color: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( Breite: 34 %;/*für Reaktionsfähigkeit*/ Höhe: 300px; Randradius: 10px; Rand: 3px #fff solid; Hintergrund: # e0e0e0; Rand oben: -30 %; Rand links: 33 %; Anzeige: keine; Deckkraft: 0; /*volle Transparenz für Animation */ Z-Index: 5000; /*Fenster muss die oberste Ebene sein*/ Polsterung -top: 20px; text-align: center; position: relative; ) #modal_window #window_close ( width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; Cursor: Zeiger; display: block; ) #myoverlay ( z-index: 3000; /*über allen Ebenen, aber unter dem Fenster */ Position: fest; /*um die Site zu überlappen*/ Hintergrundfarbe: #000; Deckkraft: 0,5; Breite: 100 %; Höhe: 100 %; /*Vollbild */ oben: 0; links: 0; Cursor: Zeiger; Anzeige: keine; )

Lassen Sie uns den CSS-Code beschreiben. Wir stellen block.wrapper so ein, dass es adaptiv ist, es ändert sich je nach Bildschirmgröße, jedoch nicht mehr als 960 Pixel. Ich werde den Tastencode nicht anzeigen. Wir legen die Breite des #modal_window-Fensters als Prozentsatz fest, die Breite hängt von der Breite des .wrappers ab. Um das Fenster zu zentrieren, stellen Sie den Rand auf 33 % ein. Er wird mit 50 %–17 % berechnet, wobei 17 % der halben Breite des Fensters entspricht. Wir verstecken das Fenster mit den Eigenschaften display: none und opacity: 0. Mit dem Code #window_close und #myoverlay ist meiner Meinung nach alles klar. Schreiben wir nun den JQuery-Code. Wir gehen davon aus, dass jqery bereits verbunden ist.

$(document).ready(function() ( $("#gowindow").click(function())(//klicken Sie auf die Schaltfläche $("#myoverlay").fadeIn(400, //zeigen Sie die Overlay-Ebene an function() ( $("#modal_window") .css("display", "block") //das Fenster sichtbar machen.animate((opacity: 1, top: "50%"), 200); //erhöhen die Transparenz, das Fenster ist glatt, bewegt sich nach außen )); )); /* Fenster entfernen */ $("#window_close, #myoverlay").click(function())( //klicken Sie auf die überlappende Ebene oder kreuzen Sie $ ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //Transparenz ist aktiviert, das Fenster geht nach oben function())( $(this).css("display", "none"); //das Fenster unsichtbar machen $("# myoverlay").fadeOut(400); //die Überlappungsebene entfernen )); )); ));

Ich denke, der Js-Code bedarf keiner Erklärung, da ich ihn recht gut kommentiert habe. Das ist alles, was ich denke, also fassen wir es zusammen. Wir haben ein einfaches, auf JQuery reagierendes modales Fenster erstellt

Hallo zusammen. Neulich habe ich mir die Blog-Statistiken genau angesehen und festgestellt, dass Beispiele für die Erstellung modaler Fenster auch für unsere Internetmitarbeiter von großem Interesse sind. Als beliebteste Lösungen erwiesen sich Lösungen zur Implementierung von Popup-Fenstern ohne Verwendung von Javascript, ausschließlich in reinem .
Während meiner Arbeit habe ich viele interessante Lösungen angesammelt, die ich zu verschiedenen Zeiten in ausführlichen Artikeln auf den Seiten meines Blogs ausführlich beschrieben habe, aber viele dieser Lektionen sind mit der Zeit in den Hintergrund gerückt. Blog-Lesern fällt es manchmal schwer, sich zurechtzufinden, und die meisten effektiven Methoden zum Erstellen effektiver modaler Fenster und Popup-Formulare bleiben einfach unbemerkt.
Unter Berücksichtigung des Interesses der Benutzer an dieser Ausgabe habe ich daher beschlossen, alle Lektionen und Beispiele zu diesem Thema zusammenzufassen und eine Sammlung modaler Fenster und Formulare in einem separaten Artikel anzuzeigen. Das Ergebnis ist eine kurze Übersicht mit einer kurzen Beschreibung, Links zu Beispielen und Artikeln. Also schauen Sie, studieren Sie, und wenn jemandem eine der Lösungen gefällt, können Sie sich gerne den Quellcode nehmen und erstellen, erstellen, erstellen ...

Die bei den Lesern meines Blogs beliebteste Methode zum Erstellen modaler Fenster. Sehr einfach umzusetzen. Das Erscheinungsbild der Popup-Blöcke und die gesamte Funktionalität basieren ausschließlich auf CSS3, ohne Javascript und zusätzliche grafische Elemente.
Die Möglichkeit, modale Fenster auf fast jeder Website zu verbinden und anzuzeigen. Es reicht aus, den HTML-Frame richtig an der richtigen Stelle zu platzieren, den benötigten Inhalt hinzuzufügen, Stile zu verbinden, das Ganze mit einer aktivierenden Schaltfläche oder einem anderen Element der Site (Bilder, Menüpunkte, Links, ein einzelnes Wort in) zu verknüpfen den Text usw.) und das war's, es kann losgehen.

Ein sehr einfaches, leichtes jQuery-Plugin, mit dem Sie schnell und einfach die Anzeige modaler Fenster mit beliebigen Informationen auf Ihrer Website implementieren können, sei es einfacher Text, Bilder, verschiedene Formulare oder eingebettete Videos.
Das Erscheinungsbild wird per CSS gestaltet, die Fenstergröße wird direkt im Link im Attribut href="#?w=500" eingestellt, wobei #?w=500 die benötigte Fensterbreite angibt. Nach dem Studium der Einzelheiten der Lektion wird jedoch alles äußerst klar. Damit diese Lösung funktioniert, ist die mit der Site verbundene jQuery-Bibliothek erforderlich.

Ursprünglich ging es in der Lektion um die absolute Zentralisierung von Blockelementen mit Inhalten, aber es wurde so viel darüber geschrieben, dass ich mich entschied, das Thema mit Anpassungsfähigkeit zu verwässern und alles in einem modalen Fenster zu überlagern, wobei ich ausschließlich CSS-Tools verwendete. Was dabei herausgekommen ist, können Sie herausfinden, indem Sie die Lektion studieren.

Eine ziemlich neue Methode zum Implementieren von Popup-Fenstern (modal). Ich habe oft versteckte Kontrollkästchen verwendet, um Dropdown-Informationsblöcke oder „“ zu erstellen. Im Ergebnis erwies sich alles als sehr einfach: Mit CSS3 und den syntaktischen Funktionen von HTML5 können Sie die Arbeit modaler Fenster einfach organisieren. Ich habe mich nicht zu sehr auf das Design konzentriert (das ist nicht der springende Punkt); ich habe das Beispiel der Bootstrap-Infoblöcke als Ausgangspunkt genommen. Die Methode funktioniert einwandfrei in allen modernen Browsern; Benutzer, die auf veralteten IE-Versionen festsitzen, fliegen leider vorbei.

Das Thema, die Videowiedergabe in einem modalen Block ausschließlich mit CSS3 und ohne Javascript zu organisieren, beschäftigt mich. Nein, mit der Videoausgabe im modalen Fenster ist alles in Ordnung, ich kann keine adäquate und zufriedenstellende Lösung finden, um das Video zu stoppen, wenn das Fenster geschlossen ist. Ich habe dummerweise einen Link mit einem leeren href=""-Attribut verwendet; diese nicht ganz koschere Methode versetzt viele geschickte Handwerker in den Schlaf, aber im Moment habe ich noch keine andere effektivere und gültigere Lösung gefunden.

Ich wurde oft gefragt, ob es möglich sei, eine Art Schieberegler in ein modales Fenster einzubetten, nicht nur für Bilder, sondern auch für Text. Warum nicht. Die Bourgeoisie fand einen einfachen Inhaltsrotator, der allen Parametern entsprach; es blieb nur noch die Kombination mit einem vorgefertigten modalen Fenster. Und am Ende ist genau das passiert, was passiert ist :)). Schauen Sie, alles ist ganz einfach umzusetzen.

Viele Websites verwenden Popup-Feedback-Formulare, Registrierungs- und Anmeldeformulare. Der einfachste Weg besteht darin, ein Arbeitsformular in ein vorgefertigtes modales Fenster einzubetten. Nehmen Sie eine ziemlich anständige Form an, die in CSS3 angelegt ist, eine beliebige Version des oben dargestellten modalen Fensters. Es bleibt nur noch, diese beiden Elemente in einem einzigen Mechanismus zu kombinieren. Wie kann man das machen? Genau das wird in der vorgestellten Lektion ausführlich beschrieben.

Eine hervorragende Möglichkeit für Ihre Benutzer, Nachrichten von einer beliebigen Seite oder einem einzelnen Website-(Blog-)Beitrag aus zu senden, ist ein separates, modales Kontaktformular. Hängen Sie den PHP-Handler korrekt an das Formular an, platzieren Sie ihn im Hauptteil der benötigten Seite und fertig. Sie müssen lediglich Ihr Postfach regelmäßig überprüfen. Diese Methode funktioniert in allen modernen Browsern korrekt: Chrome, Firefox, Opera, Safari, auch im Internet Explorer ab Version 9. Das Formular selbst ist mithilfe von CSS3-Magie mit modaler Fensterfunktionalität ausgestattet.

Bei einer Lightbox handelt es sich um eine Art modales Fenster bzw. das Funktionsprinzip ist nahezu das gleiche, wird jedoch meist zum Betrachten von vergrößerten oder vollformatigen Bildern verwendet. Irgendwann habe ich beschlossen, eine mehr oder weniger adaptive Version von Lightbox zu erstellen, die ausschließlich CSS3 verwendet. Sie können herausfinden, was dabei herausgekommen ist, indem Sie sich das Beispiel ansehen. Wenn das Thema relevant ist, studieren Sie die Lektion. Leider werden Benutzer, die stark von IE 8 und niedriger abhängig sind, nichts sehen; die Methode basiert auf der Verwendung von pseudo-class:target .

Eine (meiner Meinung nach) interessante Lösung zum Erstellen eines separaten, ursprünglich gestalteten Popup-Kontaktformulars für die Website. Das Formular basiert auf der Verarbeitung des onclick-Ereignisses. Entwerfen Sie ein Originalbild in Form eines Briefumschlags. Das Formular funktioniert in allen Browsern schnell und korrekt und ist daher ein durchaus würdiges Beispiel für eine Möglichkeit zur Interaktion mit Benutzern.

Ich werde, wie viele andere auch, beim ersten Laden der Website von verschiedenen Popup-Fenstern blockiert. Ich denke, diese Methode ist zu aufdringlich. Aber das Feature ist gefragt und weit verbreitet, sodass es sich wahrscheinlich trotzdem lohnt, zu sehen, wie das Ganze funktioniert. Alle modernen Browser sind gegenüber verschiedenen Arten von Popup-Fenstern in der Anfangsphase des Ladens einer Website misstrauisch; sie blockieren sie einfach. In der vorgestellten Lektion beschreibe ich ausführlich, wie diese Blockierung umgangen werden kann. Außerdem erfahren Sie, wie Sie Cookies richtig verwenden, sodass das Fenster dem Benutzer einmalig beim ersten Besuch der Website oder in einem bestimmten Intervall angezeigt wird.

Das ist wahrscheinlich alles. Natürlich gibt es noch ein paar andere Arbeitsmöglichkeiten zum Erstellen modaler Fenster im Stash, aber es gibt so viele davon im Internet, dass die Hauptsache darin besteht, das zu finden, was Sie brauchen. Ich hoffe, dass diese Auswahl Ihnen dabei hilft, sich in der Fülle an Artikeln auf meinem Blog im Thema zurechtzufinden. Sobald die Ausgrabungen erfolgreich verlaufen und verlorenes Material gefunden wird, wird die Rezension aktualisiert.

Bei allem Respekt, Andrew

Ein modales Fenster ist ein Container, der beim Klicken auf einen Link angezeigt wird und einige Informationen bereitstellt. Ich denke, viele kennen es bereits, aber wenn nicht, schauen Sie sich die Demoversion an, um zu verstehen, was es ist. Mittlerweile gibt es eine große Anzahl davon und jede funktioniert auf ihre eigene Weise. Es gibt zum Beispiel ganz normale, die Sie auffordern, eine Aktion auszuführen, in diesem Beispiel eine Bestätigung. Oder zum Beispiel eine andere Option beim ersten Besuch der Website, die für verschiedene Abonnements von Gruppen in sozialen Netzwerken relevant ist. Es gibt modale Fenster im Netz CSS Nun ja, ich würde diesen Anteil gerne übernehmen JavaScript, da es dadurch interessanter wird und in allen Browsern gut funktioniert.

SCHRITT EINS. JavaScript-Code.

Um ein modales Fenster zu starten, müssen Sie den Wert an die Funktion übergeben window.onload. In dem wir zwei Bezeichnerelemente übergeben werden " A" Und " B".

//Elemente mit den IDs „a“ und „b“ übergeben window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

Dann schreiben wir die Funktion „ ShowA", wodurch das modale Fenster angezeigt und an die Elemente übergeben wird " A" Und " B„Stile, nämlich wir legen die Transparenz, Breite und Blockierung des Fensters fest, wenn auf den Link nicht geklickt wurde“ offen".

//zeige das Fenster der Funktion „showA“ function showA() ( //Setze Transparenz und blockiere die Anzeige //des Elements „b“ b.style.filter = „alpha(opacity=80)“; b.style. opacity = 0.8; b .style.display = "block"; // Blockierung und obere Polsterung auf 200 Pixel // des „a“-Elements setzen a.style.display = „block“; a.style.top = „200px "; )

Nachdem wir das modale Fenster geöffnet haben, müssen wir es später irgendwie schließen oder ausblenden, dafür schreiben wir die Funktion „ ausblendenA„Dadurch wird das modale Fenster ausgeblendet und ihm Stile für die Elemente zugewiesen.“ A" Und " B".

//Rufen Sie die Funktion „hideA“ auf, die //das Fenster für die Elemente „a“ und „b“ verbirgt. function hideA() ( b.style.display = „none“; a.style.display = „none“; )

Vollständiger Code.

//Elemente mit den IDs „a“ und „b“ übergeben window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //Anzeige des Funktionsfensters „ showA“-Funktion showA() ( //Transparenz festlegen und Anzeige //des Elements „b“ blockieren b.style.filter = „alpha(opacity=80)“; b.style.opacity = 0.8; b.style. display = " block"; // Blockierung und oberen Rand auf 200 Pixel // des „a“-Elements setzen a.style.display = „block“; a.style.top = „200px“; ) // Rufen Sie „ auf Funktion „hideA“, die das //Fenster für die Elemente „a“ und „b“ ausblendet. Funktion „hideA()“ ( b.style.display = „none“; a.style.display = „none“; )

SCHRITT ZWEI. HTML Quelltext.

Offen

Im Tag „div“ Geben Sie die Kennung an " A", das mit den Stilen interagiert CSS und mit Code JavaScript. Als nächstes fügen wir ein weiteres Tag hinzu: div„und geben Sie ihm eine Kennung“ Fenster", das als Markup im modalen Fenstercontainer fungiert.

Im Inneren weisen wir auf einen Link hin, der „ schließen„Modalfenster, gib ihm auch einen Stil“ Seiten„und gib ihm einen Standardstil“ schweben rechts", das heißt, wir zeigen in der oberen rechten Ecke einen Link zum Schließen des modalen Fensters an.

Schließen

Wir registrieren die Kennung „ B", wodurch das Fenster ausgeblendet wird.

Vollständiger Code.

Öffnen schließen

SCHRITT DREI. CSS-Code.

Erforderliche Stile CSS, ohne die das modale Fenster nicht richtig funktioniert, oder besser gesagt, es wird überhaupt nicht funktionieren oder Informationen korrekt anzeigen.

Und so lautet in diesem Beispiel der erste erforderliche Stil bezüglich der Position Fest. Damit können Sie ein modales Fenster anzeigen und es dennoch auf einen Füllrahmen beschränken. Mit Hilfe Z-Index Wir geben an, wie stark das modale Fenster identifiziert wird, nachdem auf den Link geklickt wurde. offen", und auch " schließen". Auch Anzeige: keine, wodurch Sie das modale Fenster ausblenden können, bis auf den Link geklickt wird.

#b ( Position: fest; oben: 0; links: 0; rechts: 0; unten: 0; Anzeige: keine; Hintergrund: grau; Z-Index: 1; ) #a ( Rand: 1 Pixel durchgehend schwarz; Position: fest ; Hintergrund: #eff7ff; z-index:3; display:none; ) #windows ( padding:5px; width: 500px; height: 300px; border: 2px solid blue; ) a.pages ( background: #97cdff; color: weiß; Polsterung: 4px; Textdekoration: keine;) a:hover.pages (Hintergrund: rot; Farbe: weiß; Polsterung: 4px; Textdekoration: keine;)

Vielen Dank für Ihre Aufmerksamkeit!

Modalitäten, Überlagerungen, Dialoge, wie auch immer Sie sie nennen, es ist an der Zeit, dieses UI-Muster zu überdenken. Als sie zum ersten Mal auf den Markt kamen, waren Modalitäten eine elegante Lösung für ein Benutzeroberflächenproblem. Erstens vereinfachen sie die Benutzeroberfläche. Zweitens wird Platz auf dem Bildschirm gespart. Seitdem haben Designer Modalitäten gerne angenommen und einige haben sie sogar auf die Spitze getrieben. Modalitäten sind zur heutigen Version des gefürchteten Pop-up-Fensters geworden. Benutzer empfinden modale Fenster als störend und haben gelernt, sie instinktiv und automatisch zu schließen.

Ein modales Fenster ist ein Element, das sich über dem Hauptanwendungsfenster befindet. Es blockiert das Hauptfenster, lässt es jedoch hinter dem untergeordneten modalen Fenster sichtbar. Benutzer müssen mit dem modalen Fenster interagieren, bevor sie zur übergeordneten Anwendung zurückkehren können. — Wikipedia

Sie können ein modales Fenster jederzeit verwenden:

Verwenden Sie diese Option, wenn Sie die aktuelle Aufgabe des Benutzers unterbrechen möchten, um seine Aufmerksamkeit auf etwas Wichtigeres zu lenken.

Verwenden Sie diese Option, wenn Sie Informationen vom Benutzer erhalten möchten. Zum Beispiel ein Registrierungs- und Autorisierungsformular.

Verwenden Sie diese Option, wenn Sie zusätzliche Informationen anzeigen möchten, ohne den Kontext der übergeordneten Seite zu verlieren. Beispielsweise das Anzeigen größerer Bilder oder Videos.

Verwenden Sie diese Option, wenn Sie Informationen anzeigen möchten, die keinen direkten Bezug zur übergeordneten Seite haben, oder andere Parameter, die „unabhängig“ von anderen Seiten sind. Zum Beispiel Benachrichtigungen.

Hinweis: Verwenden Sie keine Modalitäten, um Fehlermeldungen, Aufgabenerfolgsmeldungen oder Warnmeldungen anzuzeigen. Lassen Sie sie auf der Seite.

Schlecht implementierte Overlays können die Aufgabenerledigung beeinträchtigen. Um sicherzustellen, dass Ihr modales Fenster Benutzer nicht stört, beachten Sie Folgendes:

Geben Sie Benutzern eine Möglichkeit, zu entkommen, indem Sie ihnen die Möglichkeit geben, das modale Fenster zu schließen. Dies kann auf folgende Weise erreicht werden:

• Schaltfläche „Abbrechen“.
• Schaltfläche „Schließen“.
• Escape-Taste
• Klicken Sie außerhalb des Fensters

Tipp zur Barrierefreiheit: Jedes modale Fenster sollte über eine barrierefreie Tastatursteuerung zum Schließen des Fensters verfügen. Beispielsweise soll die Escape-Taste das Fenster schließen.

Geben Sie dem Benutzer einen Kontext mit einem modalen Titel. Dadurch können Benutzer wissen, wo sie sich befinden, da sie die Originalseite nicht verlassen haben.

Tipp: Die Beschriftung der Schaltfläche (die das modale Fenster öffnet) und der modale Titel müssen übereinstimmen

Schaltflächenbeschriftungen sollten klare Namen enthalten. Dies gilt für jede Schaltfläche. Bei modalen Fenstern sollte die Schaltfläche „Schließen“ als Schaltflächensymbol „Schließen“ oder als „x“ dargestellt werden.

Hinweis: Machen Sie das Schaltflächensymbol nicht verwirrend. Wenn der Benutzer versucht, eine Aktion abzubrechen und das modale Fenster mit EINER ANDEREN Abbruchschaltfläche angezeigt wird, kommt es zu Verwirrung. „Storniere ich die Stornierung? Oder mache ich weiter?“

Ein modales Fenster sollte nicht zu groß oder zu klein sein, es soll lediglich die richtige Größe haben. Das Ziel besteht darin, den Kontext beizubehalten, sodass das modale Fenster nicht den gesamten Bildschirm einnehmen sollte. Der Inhalt muss zum Modellfenster passen. Wenn eine Bildlaufleiste erforderlich ist, können Sie eine neue Seite erstellen.

• Die Position befindet sich oben auf dem Bildschirm, da das modale Fenster in der mobilen Ansicht möglicherweise verloren geht, wenn Sie es unten platzieren.
• Größe  –  Benutzen Sie nicht mehr als 50 % des Modellfensterbildschirms.

Wenn Sie ein modales Fenster öffnen, nutzen Sie den Lightbox-Effekt (verdunkeln Sie den Hintergrund). Dies lenkt die Aufmerksamkeit auf das modale Fenster und zeigt an, dass der Benutzer nicht mit der übergeordneten Seite interagieren kann.

Tipp zur Barrierefreiheit: Legen Sie den Tastaturfokus auf das modale Fenster fest.

Überraschen Sie Benutzer nicht mit einem modalen Popup-Fenster. Lassen Sie eine Benutzeraktion, z. B. das Klicken auf eine Schaltfläche, das Folgen eines Links oder das Auswählen einer Option, ein modales Fenster auslösen. Modale Fenster, die sich von selbst öffnen, können den Benutzer überraschen und dazu führen, dass sie schnell geschlossen werden.

Modale und mobile Geräte funktionieren im Allgemeinen nicht gut zusammen. Das Anzeigen von Inhalten ist schwierig, weil die Modalitäten zu groß sind, zu viel Platz auf dem Bildschirm beanspruchen oder zu klein sind. Fügen Sie Elemente wie eine Gerätetastatur und verschachtelte Bildlaufleisten hinzu. Benutzer können nur ihre Finger bewegen und zoomen und versuchen, das modale Fensterfeld zu erfassen. Für modale Fenster gibt es bessere Alternativen, daher sollten diese nicht auf mobilen Geräten verwendet werden.

Vergessen Sie beim Erstellen modaler Fenster nicht, barrierefreie Tastatursteuerelemente hinzuzufügen. Folgendes berücksichtigen:

Beim Öffnen eines modalen Fensters muss das Element, das das Dialogfeld aufruft, über die Tastatur zugänglich sein.

Fokus auf ein Dialogfenster verschieben – Wenn ein modales Fenster geöffnet ist, sollte der Tastaturfokus an den Anfang verschoben werden.

Steuern des Tastaturfokus  –  Wenn der Fokus auf ein Dialogfeld verschoben wird, sollte er darin „gesperrt“ bleiben, bis das Dialogfeld geschlossen wird.

Schließen eines Dialogs  –  Jedes modale Fenster muss über eine zugängliche Tastatursteuerung verfügen, um dieses Fenster zu schließen.

Der Accessible Rich Internet Applications (ARIA)-Standard definiert Möglichkeiten zur Verbesserung der Barrierefreiheit von Webinhalten und Webanwendungen.

Die folgenden ARIA-Tags können beim Erstellen eines barrierefreien modalen Fensters nützlich sein: Role = „dialog“, aria – versteckt, aria – label

Achten Sie auch auf Benutzer mit Sehbehinderung. Sie können Bildschirmlupen an Monitoren verwenden, um den Bildschirminhalt zu vergrößern. Nach der Vergrößerung kann der Benutzer nur einen Teil des Bildschirms sehen. In diesem Fall werden modale Fenster auf die gleiche Weise wie auf mobilen Geräten angezeigt.

Wenn die Leute gelernt haben, automatisch zu versuchen, modale Fenster zu schließen, warum sollten Sie sie dann verwenden?

Die großen Vorteile modaler Fenster sind es, die Aufmerksamkeit des Benutzers zu erregen, den Kontext beizubehalten und die Benutzeroberfläche zu vereinfachen. Allerdings haben sie auch Nachteile, da sie das Benutzererlebnis unterbrechen und die Interaktion mit der übergeordneten Seite unmöglich machen, indem sie den Inhalt hinter einem modalen Fenster verbergen. Ein modales Fenster ist möglicherweise nicht immer die Antwort. Berücksichtigen Sie bei der Auswahl Folgendes:

Checkliste

• Wann zeigen wir modale Fenster?
• Wie zeigen wir modale Fenster an?
• Wie sehen modale Fenster aus?
• Welche Informationen stellen wir zur Verfügung und sammeln sie?

Es gibt eine alternative UI-Komponente für modale Fenster: nicht modal oder bekannt als Toast (ein Begriff, der von Microsoft und Google im Material Design verwendet wird). Lesen Sie meinen nächsten Beitrag, um mehr zu erfahren.

Inhalte in modalen Fenstern anzeigen. Um das Plugin auf der Demoseite in Aktion zu sehen, klicken Sie auf den Link: Anmeldeformular oder Basisinhalt.

Popup-Nachrichten. Das Plugin gibt es in zwei Versionen. In einem Fall verschwinden Nachrichten nach einer gewissen Zeit von selbst, in der zweiten Implementierung muss man zum Schließen einer Nachricht auf einen Button klicken.

Plugin „Reveal“. Um das Plugin in Aktion zu sehen, klicken Sie auf der Demoseite auf die Schaltfläche „Fire A Reveal Modal“.

Klicken Sie auf das Kreuz auf der Demoseite, um das Plugin in Aktion zu sehen.

jQuery-Plugin zur Anzeige eines Feedback-Formulars in einem Popup-Fenster.

Dialogfelder im Facebook-Stil. Zusätzlich zu statischen Informationen können Sie Bilder, Frames und Ajax-Anfragen in Fenstern platzieren. Viele Einstellungen für die Funktionsweise des Plugins, ein sehr leistungsstarkes Tool. Sieht sehr stilvoll und funktional aus. Folgen Sie den Links auf der Demoseite, um Beispiele mit unterschiedlichen Inhalten zu sehen.

Ein hübscher Popup-Dialog in jQuery.

Niedliche modale Popup-Fenster. Drei Stile. Die Demoseite enthält 3 Links zum Öffnen von Fenstern.

Modale Popup-Fenster verschiedener Typen. Um das Plugin in Aktion zu sehen, klicken Sie auf den Link auf der Demoseite.

Die Meldung wird oben auf der Seite angezeigt, die wiederum abgeblendet ist. Klicken Sie auf der Demoseite auf „Klick mich“, um eine Popup-Nachricht anzuzeigen. Durch Klicken auf das Kreuz wird es geschlossen. Implementiert mit jQuery.

Implementieren Sie moderne modale Dialoge, ohne Pop-ups und Seitenneuladevorgänge zu verwenden. Klicken Sie auf der Demoseite auf die Schaltfläche „Demo starten“, um das Skript in Aktion zu sehen.

Plugin zur Anzeige von Inhalten in modalen Fenstern.