Colorbox (modal dialog box)

How to Create a Popup Box

Jack Moore created an easy-to-use dialog (popup) box.

Follow these steps to create a simple version. Keep in mind, there are several options/features and this demo will create an inline version, which should cover most of your needs.

Add colorbox-basic.css to the <head> section of your page.
Add jQuery to your page.
Add the Colorbox code (jquery.colorbox-min.js) to your website.
Create a link (<a> tag) that will display the popup box.
1. Ensure it has class="colorbox"
2. Ensure it’s href points to your <div>’s ID attribute.
Example: <a href="#example" class="colorbox">Show More...</a>
Create the content that will appear in the Colorbox. Wrap it in a div with a unique ID (ex: <div id="example">).
Wrap that <div> in a another <div> and hide it.
Convert your links or buttons into a colorbox action with this code:

<script type="text/javascript">
$(document).ready(function(){
	 $('.colorbox').colorbox({
		 inline:true,
		 opacity:0.5
	 });
 });
 </script>

Here is an example of it in action.

The easiest way to get started is to download this example and play with it.

Details

Colorbox is primarily geared to work with <a> tags and the contents of the colorbox will come from the href attribute of the link. Here is a typical case:

<a href="myPage.html class="colorbox">Show Content</a>
<script>
$('.colorbox').colorbox();
</script>

It can also act as a slideshow for content, or images, depending on what you have in the href attribute. For a somewhat edge-case example of a slideshow, see this example.