This plugin is for developers and designers who want precise control over their overlays/lightboxs/dialogs. Lots of plugins out there make you use their design and add a ton of html to the page making customization difficult and brittle.
Overalls aims to be as lightweight as possible, low on configuration, and high on ease of customization to make complex ui interaction possible.
-
Places one huge semi-transparent div over the whole page.
-
Adds one completely transparent div over the semi-transparent div in which to place your overlay div, it has no height.
-
Appends the overalls-overlay div to the fully transparent div
Overalls is made to not be too smart, any html you give it, it’ll put it in the overalls-overlay div
html = $('div#html-example').html()
$.overalls(html)
Its pretty easy, you get a click handler on the transparent div and a keypress event on the escape key that closes the overlay. Optionally, you can call the “close” method on the Overalls object. It will fadeout the divs and remove them from the page. italic: Note: Overalls does not provide you with a close button, that’s up to you to handle.
// For instance you might want a close button in the overlay:
$.overalls(html)
$('a.close_overlay').click(function(){
$.overalls.close()
})
Overalls has three modes:
-
Basic
-
CSS-Customizable
-
Blank
Just like above, its pretty darn easy:
html = $('div#html-example').html()
$.overalls(html)
You can override the blank divs styling using a css class:
html = $('div#html-example').html()
$.overalls(html, {cssClass: 'custom-overlay'})
Done, just set “blank” to true in Overalls options, and you can drop in your fully formatted html as an overlay:
html = $('div#pre-existing-html').html()
$.overalls(html, {blank: true})
You can set the color and opacity of the transparent div like so:
$.overalls(html, {opacity: 0.1, color:'#f0f'})
Browser support in:
-
Safari
-
Firefox
-
Chrome
-
IE7 (needs pngFix)
I developed this out of the need to just pass formatted html into a lightbox-like-thing. In addition, a lot of the plugins I’ve used didn’t either play nice with Rails or were hard to customize. No name naming here, I’m sure if you’re reading this you’ve played with a few other lightbox/overlay plugins you know which ones I’m talking about.
So here’s what I’m excited to do with this plugin:
$.ajax({
url: '/some/url/that/hits/rails/and/returns/a/partial'
type: 'GET'
dataType: 'html'
success: function(html){
$.overalls(html, {blank: true})
}
})
})
I’ve been abandoning the Rails helpers and even JRails in favor of writing pure JQuery ajax (IN A RAILS APP OMG OMG NO WAY!). This has solved so many complex interaction headaches. I don’t know about you but I hate RJS templates. With JQuery ajax I can easily control (in JQuery, not some js like railsy dsl) what the user sees when an ajax request happens: hiding/showing loader gifs, displaying error messages, updating a lot of divs, making subsequent ajax calls if needed, maintaining page state in the url (thanks to the awesome awesome awesome BBQ plugin), etc.
Anyway, I hope you find this plugin helpful, let me know if you have problems, and send me links of it in the wild.