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"

hi there

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

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;
}

And I welcome all suggestions :)

3 thoughts on “a quick javascript lightbox

  1. Hey, the way the scripts are here it just doesn’t work.. :/
    The coffescript is using “#admin_lightbox” as id for the lightbox but the css contains “#admin_layout”, but there’s no elements with this identifier. Changing the “#admin_layout” to “#admin_lightbox” on css just made it work! :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s