uikit Modalbox bei Pageload öffnen
Lösung mit uikit 2.x

In diesem kurzen Artikel möchte ich euch zeigen wie ihr mit jQuery und dem uikit Framework auf die schnelle ein DIV on Document Ready in einer Modalbox ausgebt.

Im untenstehenden Beispiel haben wir das Div mit der ID "theBox". Dieses Div soll beim laden der Seite direkt als Modal angezeigt werden.

Die unten aufgeführte Lösung zeigt einen Weg mittels jQuery und uikit. Weiter unten findest du einen Link zur Demo.

Javascript

		<script type="text/javascript">
			$(document).ready(function(){
				var theBox = UIkit.modal("#theBox");
				if ( theBox.isActive() ) { 
					theBox.hide(); 
				}
				else { 
					theBox.show(); 
				}
			});
		</script>

HTML

	<body>
		<div class="uk-width-9-10 uk-container-center uk-margin-top">
			<div id="content">
				<h1>Modalbox bei Pageload</h1>
				<h3>Demo mit uikit Version 2.27.x</h3>
				<p>Ein simpler Paragraph.</p>
			</div>
		</div>
		<div id="theBox" class="uk-modal">
			<div class="uk-modal-dialog">
				<a class="uk-modal-close uk-close"></a>
				<h1 class="uk-text-center">Der Javascript Popup</h1>
				<p>Dieser Javascript Popup wurde mit uikit erstellt.<br>Link: <a href="http://getuikit.com" target="_blank">get uikit</a></p>
			</div>
		</div>
	</body>

Demo ansehen

jquery icon

jQuery als Basis

jQuery ist die meistverwendete JavaScript-Bibliothek. Jede zweite Website und drei Viertel der 10.000 meistbesuchten Websites nutzen jQuery (Stand: Juli 2014). jQuery wird in vielen Content-Management-Systemen und Webframeworks bereits mitgeliefert. Quelle: Wikipedia

jquery icon

uikit für das Frontend

Uikit (von yootheme) ist ein freies CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche JavaScript-Erweiterungen.

Monday, 22 May 2017 Posted in Javascript, uikit Framework, uikit v2.x, jQuery

Leave a comment

You are commenting as guest.