YALB? (Yet Another Light Box?)

It was really hard to find a modal/lightbox that could let you put an instance of tinyMCE inside, so we built this one.

We built it to use on our product LessPlan, a web application to help teachers generate and share lesson plans.

Download the source on GitHub



Typical modal/lightbox plugins clone markup and reinsert it into the plugin's own container. This works fine until you have javascript bound to elements or iframes. lightModal, takes a different approach by making the original content container the lightbox, thus keeping any javascript bindings.


Basic markup

	<a id="modal_trigger_1" class="btn" href="#modal_1">Open modal</a>

	<div id="modal_1">
	    <h2>I'm a modal</h2>
	    <p>Put anything inside</p>

Basic use

This is the most basic example

Basic use demo

Callbacks onHide and onOpen

lightModal lets you define a function that will execute on hide and on close of the modal/lightbox.

        onHide: function(){
          alert("I've hidden myself")
        onShow: function(){
          alert("Well hello there!")
Demo callbacks

Click overlay to close

If you don't want to

	     	overlayDisable: true
Demo overlay click to hide


Option key Explanation Default
modalContainer Specify the class or id of the container of the element to place inside the modal box Uses the value of the href attribute. e.g. <a href="#foo">Open</a> will open open up the contents inside a contained with an id of "foo"
width Width of the modal auto
padding Padding on the modal container 36
topMargin Margin at the top of the modal container 36
closeButtonDisable Disable the close button on the top right hand side of the modal false
overlayDisable When set to true, will allow clicking on the overlay outside of the lightbox to hide the modal/lightbox. false
overlayHtml The overlay (semi transparent thing in the background) html, you can customise it to your own liking <div class="light-modal-overlay"></div>
onShow Callback which fires after the modal/lightbox is displayed none
onHide Callback which fires after the modal/lightbox is hidden none

Get it

View and download on GitHub