Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Schöne Modals mit Avgrund

(Foto: Rchard / flickr.com, Lizenz: CC-BY)

Man kennt sie von diversen Galerien, Kontaktformularen und Infoboxen: Modals. Warum sie eure UX verbessern können und wie ihr Avgrund Modal einsetzen könnt, lest ihr im folgenden Artikel.

Warum ein Modal Sinn macht

Bei euren Webprojekten kann es vorkommen, dass ihr Zusatzinformationen anzeigen lassen müsst, die nicht unbedingt mit der Website zu tun haben. Diese Informationen erweitern somit euren Informationsgehalt beziehungsweise das Anwendererlebnis, sind aber nicht zwingend für jeden Benutzer erforderlich. Das heisst: Wenn ein Benutzer diesen Zusatzinhalt sehen will, kann er das mit einer Interaktion veranlassen. Man kann also, unabhängig von den restlichen Usern, zusätzliche Informationen für Einzelne darstellen. Die Möglichkeit ein Overlay beziehungsweise ein Modal in euer Projekt einzubauen — das nicht nur auf die Eigenschaften von Popups, die euch das Betriebssystem vorgibt, limitiert ist – kann also eure Usabilty erhöhen und ihr könnt den Platz, den ihr durch Modals spart, für die wirklich wichtigen Inhalte nutzen. Im Gegensatz zu Popups sind Modals auch gegen Popup-Blocker immun, was euch aber nicht veranlassen sollte, in ein Dark Pattern zu verfallen.

So schön ist das Avgrund Modal (deutsch: Abgrund). (Foto: Rchard / flickr.com, Lizenz: CC-BY)

Avgrund Modal – Klein und mächtig

Dimitri Voronianski hat sich von Avgrund.js inspirieren lassen und seine eigene Interpretation davon geschaffen – Avgrund Modal. Das jQuery-Plugin „wiegt“ minified circa ein Kilobyte und bietet euch eine schnelle und einfache Möglichkeit, ein Modal anzeigen zu lassen. Das Plugin ist aber kein Ersatz für eine Galerie, vielmehr könnt ihr dieses Plugin für alles andere einsetzen.

Implementierung

Das Plugin ist so klein, dass die Dokumentation direkt im Code vorhanden ist. Trotzdem ist dieses Modal-Plugin sehr mächtig.

$('element').avgrund(
width: 380, // max is 640px
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
holderClass: '', // lets you name custom class for popin holder..
overlayClass: '', // ..and overlay block
enableStackAnimation: false, // another animation type
onBlurContainer: '', // enables blur filter for specified block
openOnEvent: true, // set to 'false' to init on load
setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
onLoad: function (elem) { ... }, // set custom call before popin is inited..
onUnload: function (elem) { ... }, // ..and after it was closed
template: 'Your content goes here..' // or function (elem) { ... }
});

Neben diversen Einstellungsmöglichkeiten wie einer festen Größe des anzuzeigenden Modals oder verschiedenen Möglichkeiten, die Animation starten zu lassen, werden auch onLoad- und onUnload-Funktionen angeboten.

$(element).avgrund({
onLoad: function (element) {
    console.log('Diese Nachricht wird aufgerufen bevor Avgrund initialisiert wurde.');}
});

Informationsdarstellung im Modal

Das originale Plugin, Avgrund.js, sticht durch eine schöne Animation hervor, bei der es den Anschein hat, als würde die restliche Website nach „unten“ fallen und das Modal darüber schweben. Diesen Effekt findet ihr auch bei Avgrund Modal, aber richtig stark wird das Plugin erst durch die Möglichkeit, verschiedene Inhalte anzeigen zu lassen. Es werden drei Optionen zur Darstellung geboten:

String

Ihr könnt einfache Strings ausgeben lassen ...

$(element).avgrund(
template: '<p>Hier dein Inhalt!</p>'
});

Funktion

… oder ihr übergebt eine eigene function():

$(element).avgrund({
template: function (element) {
    // return 'your content..'
}});

jQuery-Object

Die dritte Möglichkeit wird durch jQuery-Objects realisiert, die ihr euch innerhalb eures Webprojektes anlegt und dann über Avgrund ausgeben lassen könnt:

<div class="content">
t3n.de ist cool!
</div>
$('element').avgrund({
template: $('.content')
});

Damit könnt ihr auch komplexere Modals erstellen und das, ohne zuerst vorhandene Styles des Plugins überschreiben beziehungsweise überarbeiten zu müssen. Im Test verhielt sich das Plugin wie beschrieben. Falls ihr auf das Problem stoßt, dass der Text während der Animation nicht mehr angezeigt wird, habt ihr vielleicht ein Floating-Problem in eurem Code. ;) Eine Demo zu Avgrund Modal findet ihr hier. Auf GitHub könnt ihr Avgrund Modal runterladen.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst