jQuery Fly Out Fenster

Möchte man ein Bild einer Gallerie besser darstellen oder ein Dialogfenster öffnen, bietet sich dieses Snippet an. Hierbei wird der Hintergrund abgedunkelt, ist nicht mehr klickbar, sodass das neue Fenster im Vordergrund steht.

Geschlossen werden kann dieses Fenster durch Esc oder einen Klick neben das Fenster, aber natürlich auch über jeden dafür vorgesehenen Button, den man im Fenster platzieren kann. Zurück zur Übersicht

Vorraussetzungen

nach oben

Für dieses Snippet wird(überraschenderweise) HTML, CSS und JavaScript nötig, genauer: jQuery. Sofern noch nicht im Projekt eingebunden, kann das im <head> über

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

realisiert werden. Die genaue Version und Adresse kann auf der jQuery Downloadseite entnommen werden. Um zusätzliche Serveranfragen zu vermeiden, können die Skripte auch in die eigenen Dateien eingebunden werden.

Vorab gibt es hier eine Demo des Fensters.

HTML Markup

nach oben

Der nötige HTML Aufwand ist relativ übersichtlich. Mehr als zwei div Elemente sind für das Fenster nicht nötig.

<body>
	<div class="flyWrap">
		<div class="fly">
			Fensterinhalt
		</div>
	</div>
	...
</body>

Die div Elemente werden direkt hinter dem einleitenden <body> eingefügt. Der Fensterinhalt kann natürlich beliebig und je nach Bedarf ersetzt werden.

CSS Deklarationen

nach oben

Im nächsten Scritt legen wir die Darstellung des Fensters fest. Wenn wir um das Fly Out den Hintergrund abdunkeln wollen, brauchen wir einen eben solchen dunklen Bereich in voller Größe. Das lässt sich wie folgt realisieren:

.flyWrap {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	background: rgba(0,0,0,0.5);
}
.flyWrap.enable {
	display: block;
}

Die Stile sollten relativ selbst erklärend sein, aber ich gehe sie noch einemal von oben nach unten durch.

Dank display: none wird der Bereich per Standard ausgeblendet, und erst wenn der Bereich in der Aktivierung die Klasse enable bekommt, wird er dargestellt.

position: fixed brauchen wir, um den dunklen Bereich im aktuellen Browserbereich zu halten, width und height dienen mit ihren Werten der füllenden Abmessungen.

Per z-index bringen wir den bereich nach ganz oben in der Darstellungsreihenfolge, der Wert sollte natürlich über allen anderen des Projekts liegen. Abschließend wird dann noch mittels rgba ein Farbe eurer Wahl vergeben.

Nun kann das eigentliche Fly Out gestaltet werden:

.fly {
	position: relative;
	top: 50%;
	margin: -125px auto 0px auto;
	width: 375px;
	height: 250px;
	overflow: hidden;
	border-radius: 5px;
	background: #fafafa;
	box-shadow: 0 0 10px #333333;
	color: #333333;
}

Wirklich interessant sollte hier eigentlich nur die Positionierung in den ersten drei Zeilen sein. Ich erachte es als sinnvoll, wenn solche herausgestellten Fly Outs in der Bildmitte sind, daher habe ich diese Methode gewählt. Nachteil hierbei allerdings: Die Größe des Fensters muss mit angegeben werden.

Horizontal kann ein Blockelement per margin:0 auto einfach zentriert werden, allerdings nicht vertikal. Daher positionieren wir das Fenster relativ und schieben es mittels top: 50% die Hälft des Browserfensters nach unten. Da nun allerdings die Oberkante des Fly Outs genau mittig liegt, muss es über ein negatives Margin um die Hälft der Fly Out Höhe zurückgeschoben werden, sodass unsere Außenabstand insgesamt margin: -125px auto 0 auto ergibt.

Was darauf folgt sind Breite und Höhe, ein Abschneiden des Inhaltsüberfluss mit overflow: hidden und optische Spielereien, damit das Fenster gut erkennbar ist.

An und für sich reicht dies aus, um den gewünschten Effekt zu erzielen. Der dunkle Bereich ist auch nicht weiter anklickbar, allerdings lässt er sich scrollen. Das kann unter Umständen unerwünscht sein, also erstellen wir noch eine Klasseneigenschaft, die das später verhindern wird:

.noScroll {
	overflow-y: hidden;
}

JavaScript- und jQuery-Code

nach oben

Natürlich wollen wir mit diesem Fenster auch arbeiten und es vor allem auch anzeigen lassen. Dafür schreiben wir zunächst zwei JavaScript-Funktionen, die das Anzeigen und Verbergen behandeln. Dadurch können wir beide Prozesse beliebig anpassen und leicht an vielen Stellen im Quellcode später aufrufen.

function showFly() {
	$('body').addClass('noScroll');
	$('.flyWrap').addClass('enable');
}
function hideFly() {
	$('body').removeClass('noScroll');
	$('.flyWrap').removeClass('enable');
}

Auch hier passiert keine große Zauberei, unser <div class="flyWrap"> bekommt lediglich die Aktivierungsklasse enable und der body die Fixierungsklasse noScroll. Zum Deaktivieren des Fly Outs werden die jeweiligen Klassen wieder entfernt.
Sind Ein- und Ausblende-Effekte gewünscht, können die hier untergebracht werden.

Platzieren wir auf der Seite nun Buttons oder Links, kann das Fly Out bspw. in dieser Form aktiviert werden:

$('.flyOpen').click(function(e) {
	showFly();
});

Ein solches Dialog- oder Fly Out Fenster möchten Nutzer intuitiv gerne mit Esc wieder schließen. Daher klinken wir uns für das gesamte Dokument in den keyup-Listner und prüfen ob die gewünschte Taste gedrückt wurde. DIe jeweiligen Zahlenwerte der einzelnen Tasten können per Google leicht gefunden werden, oder ihr schaut hier beim ersten Suchergebnis nach.

$(document).keyup(function(e) {
	var keyCode = e.keyCode || e.which;
	if(keyCode == 27) {
		// esc
		if($('.flyWrap.enable').length > 0) {
			hideFly();
		}
	}
});

Hier habe ich auch eine Überprüfung eingefügt, ob der Wrapper überhaupt aktiv ist. Diese Überprüfung wird vor allem dann sinnvoll, wenn eure Deaktivierung komplexer wird, oder ihr bspw. mit toggleClass() arbeitet.

In der Bedienung ebenfalls sehr intuitiv ist die Möglichkeit, durch einen Klick neben das Fly Out eben jenes zu deaktivieren.

$('.flyWrap').mouseup(function(e) {
	$check = $('.fly');
	if(!$check.is(e.target)
		&& $check.has(e.target).length === 0) {
		hideFly();
	}
});

beuster{se}

Impressum und Datenschutzerklärung

Für die Klicksensitivität kann click() oder auch mouseup() genutzt werden. In der Funktion darin legen wir unseren Bereich $check. In diesem Bereich soll ein Klick nicht automatisch zu Schließeung führen, daher ist der Checkbereich auch unser Fly Out.

Wir müssen also nur noch prüfen, ob unser Klickpunkt nicht der Checkbereich ist (siehe !$check.is(e.target)) UND dass auch keines der Kind-Elemente Ziel des Klicks war (siehe $check.has(e.target).length === 0).
Liegen wir nach diesen Überprüfungen außerhalb des Fly Outs, können wir es proplemlos schließen.

Resultat

nach oben

Das war es dann soweit auch, am Ende habe ich mehr geschrieben, als es eigentlich Code gibt. Wer den Code nicht aus den einzelnen bereichen kopieren möchte, findet ihn auch auf GitHub als Gist. Einen Demo-Link gibt es hier natürlich auch wieder, Feedback kann ~~im entsprechenden Blogartikel oder~~ auf der GitHub-Seite hinterlassen werden.

Insofern, fröhliches coden!