a quick javascript lightbox

I had to develop some feature which required some javascript lightbox,
I really not needed a fancy one, but a small or medium one
it was for some small confirmation and in addition a couple of inputs on confirmation
so you can imagine a small html form being poped up
I had to add one then, and I guessed tomorrow there might be couple of more coming

I found very nice options when googled
but I thought of implementing one of my own just for fun, and I got this a quick one

admin.lightbox.show(
  html: "my html goes here"
  title: "my title"
).done(->
  alert "Am done"

And it really took a very less time to build this one as follows

	window.admin ||= {}
	$.extend window.admin,
	lightbox:
	show: (options) ->
	options = {} unless options
	buttonDone = options.buttonDone or "Done"
	buttonCancel = options.buttonCancel or "Cancel"
	focus = options.focus or "input"
	$("body").append "<div id='modal_shadow'></div>" unless $("div#modal_shadow")[0]
	$("body").append "<div id='admin-lightbox'></div>" unless $("div#admin-lightbox")[0]
	$("div#admin-lightbox").html "<div id='content'>" + options.html + "</div><div id='buttons'></div>"
	$("div#admin-lightbox div#buttons").append "<button onclick='admin.lightbox.do_done(); return false;'>" + buttonDone + "</button>"
	$("div#admin-lightbox div#buttons").append "<button onclick='admin.lightbox.do_cancel(); return false;'>" + buttonCancel + "</button>"
	$("div#admin-lightbox").prepend "<div id='title'>" + options.title + "</div>" if options.title
	$("div#modal_shadow").show()
	$("div#admin-lightbox").show()
	$($("div#admin-lightbox " + focus)[0]).focus()
	admin.lightbox
	callback_done: null
	done: (callback) ->
	admin.lightbox.callback_done = callback
	admin.lightbox
	do_done: ->
	try
	admin.lightbox.callback_done()
	admin.lightbox.hide()
	false
	callback_cancel: null
	cancel: (callback) ->
	admin.lightbox.callback_cancel = callback
	admin.lightbox
	do_cancel: ->
	try
	admin.lightbox.callback_cancel()
	admin.lightbox.hide()
	false
	hide: ->
	$("div#modal_shadow").hide()
	$("div#admin-lightbox").hide()
	admin.lightbox

view raw

admin.lightbox.js.coffee

hosted with ❤ by GitHub

The most interesting part here is to be able to define callbacks like done and cancel.

	body.active_admin #modal_shadow{
	z-index: 999998;
	position:fixed;
	top: 0px; left: 0px;
	height:100%; width: 100%;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NsampKAwAFAgHu04pC4AAAAABJRU5ErkJggg==) repeat;
	display:none;
	padding: 0; margin: 0;
	}
	body.active_admin #admin-layout{
	padding:10px;
	margin:10px;
	top: 100px;
	min-height:100px;min-width:200px;
	display:none;
	background-color:white;
	z-index:999999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 5px 19px #777;
	-o-box-shadow: 0px 5px 19px #777;
	-webkit-box-shadow: 0px 5px 19px #777;
	-moz-box-shadow: 0px 5px 19px #777;
	position:fixed;
	top: 50%;
	left: 50%;
	margin-left: -200px;
	margin-top: -150px;
	}
	body.active_admin #admin-layout #title{
	padding:2px 5px;
	background-color: #efefef;
	font-weight: bold;
	color:#555;
	font-size: 1.1em;
	margin-bottom: 10px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}
	body.active_admin #admin-layout #content{
	float:left;
	margin-bottom:10px;
	}
	body.active_admin #admin-layout #buttons{
	height:42px;
	width:96.5%;
	padding:5px;
	float:right;
	background-color: #efefef;
	float:right;
	border-bottom: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	}
	body.active_admin #admin-layout #buttons button{
	margin:8px;
	padding:8px;
	padding-top:6px;
	padding-bottom:6px;
	float:right;
	font-weight: bold;
	color:#555;
	font-size: 1.0em;
	}

view raw

admin.lightbox.css.scss

hosted with ❤ by GitHub

And I welcome all suggestions :)

Advertisement