Modals Included
Modals are lightboxes dedicated to html content, i.e. movies, games, forms, and more.
This is an html modal, and like a lightbox, you can choose the overlay color and color of the container.
jQuery Combo Pack
Modal, LightBox, Carousel, with premium overlays included! Plus, bonus CSS utility! Clear Instructions
Attach custom html to any lightbox, or modal
More Examples
- Modal
- LightBox
- RoundAbout
- +Bonus CSS Hack: Page Specific CSS
- Download the Pack
Compatible with All Major Browsers
Lightbox
Just as every other utility on this page, the lightbox is compatible with all major browsers. It's been tested in Joomla and Wordpress.
Delux
Round About
View KING SIZE! Compatible with All Major Browsers.
Clear Instructions Included
Everything is included each in a seperate folder with clear instructions on how to install each item and a copy of everything is combined in this main demo page.
- Tutorial provided
- Easy copy and paste scripts
- Easy stylesheets included
You will learn how to create a pop up for images and for content. In this kit, you have the option of using colorful transparent overlays. The modal pop ups have a semi-transparent background to add to the style of the webpage. With this lightbox html kit you can easily create a lightbox gallery.
CSS Control
Implement page specific css, with a simple javascript include placed in your template header, .tpl, .php, or your CMS main template file to control any given page's styling or access any dom element specific to that page, from a master file. Great for Joomla!
<script type="text/javascript" src="js/page-specific-dom.js"></script>
close
Gold Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
Blue Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
Green Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
Pink Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
Red Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
White Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
close
Black Fill Color
Every modal is an HTML div that is invisible until a link is clicked with a href=#id_of_modal. To be an link that activates a modal, there must be a data-rel="leanModal" attribute in the anchor tag. An example of what you need to recreate this effect is given below. The instructions for each of these are basically the same, but each have a few tweaks.
The instructions for each of these are basically the same, but each have a few tweaks. Just replace href="..." with your image path. Title is the caption.
Below is the actual modal that will display on your page when the link above is clicked.
Share on 
About jQuery Combo Pack
All photos on this demo page came from a stock photo gallery where each license has been properly secured and the authors have been paid. Every toolkit involved has been licensed and with permission granted to further extend the toolkits to the needs of the users.