maxterry · February 28, 2016 17:31 · Feb 28, 2016 · Feb 28, 2016
diff --git a/lightbox b/lightbox
@@ -0,0 +1 @@
+Simple Lightbox (modal window with semi-transparent background)
diff --git a/bg.png b/bg.png
diff --git a/bg.png b/bg.png
diff --git a/lightbox.css b/lightbox.css
@@ -0,0 +1,15 @@
+#lightboxContainer {
+	display: none;
+	position: absolute; top: 0; height: 100%; width: 100%; z-index: 1;
+	background: url(/img/bg.png);
+}
+
+#lightbox {
+	display: none;
+	z-index: 2;
+	margin-top: 135px;
+	margin-left: auto; margin-right: auto;
+	height: 50%; width: 50%;
+	min-height: 200px; min-width: 200px;
+	background: #fff;
+}
diff --git a/lightbox.html b/lightbox.html
@@ -0,0 +1,9 @@
+<div id="lightboxContainer">
+	<div id="lightbox">
+		<div>
+			<div>
+				Lightbox
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/lightbox.js b/lightbox.js
@@ -0,0 +1,22 @@
+function showLightbox() {
+	// Semi-transparent background
+	document.getElementById('lightboxContainer').style.display = 'block'
+	// Dialog box
+	document.getElementById('lightbox').style.display = 'block'
+	// Prevent scrolling
+	document.body.style.overflow = 'hidden'
+	// Set Esc button listener, to close lightbox
+	document.onkeydown = function(ev) {
+		ev = ev || window.event
+		if (ev.keyCode == 27) {
+			hideLightbox()
+		}
+	}
+}
+
+function hideLightbox() {
+	document.getElementById('lightboxContainer').style.display = 'none'
+	document.getElementById('lightbox').style.display = 'none'
+	document.body.style.overflow = 'auto'
+	document.keydown = null
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Simple Lightbox (modal window with semi-transparent background)
No results found