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 GitHubTypical 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.
<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>
</div>
This is the most basic example
$("#modal_trigger_1").lightModal();
Put anything inside
lightModal lets you define a function that will execute on hide and on close of the modal/lightbox.
$("#modal_trigger_2").lightModal({
onHide: function(){
alert("I've hidden myself")
},
onShow: function(){
alert("Well hello there!")
}
});
If you want users to be able to hide the modal box when they click outside of it, then this is the option for you
If you don't want to
$("#modal_trigger_3").lightModal({
overlayDisable: true
});
This modal/lightbox will close when you click outside
| 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 |