Creating a Lightbox Popup Dialog with jQuery UI

Posted in Tutorials

A lightbox is when user clicks on a photo to show an enlarged photo with the background dim.  In this tutorial, we will do similar, but instead of a photo, we create a lightbox popup dialog using jQuery UI Dialog widget.

View live code here.

1. Let’s start with a basic HTML5 page with dummy text and a link to popup the lightbox dialog.  See tutorial in the previous link for details about the HTML 5 page.

2.  jQuery UI is dependent on jQuery library.  We add both of these to the bottom of our page, right before the closing </body> tag.  Put the jQuery library first and then we put the jQuery UI library after.  For our jQuery library, we use the CDN (content delivery network) at http://code.jquery.com/   We picked the latest stable minified version, which is jQuery core 2.0 (at the time of this writing).  However, if you need to support Internet Explorer 9 or below, you need to use the older jQuery 1.x version.

3. Now to add the jQuery UI library, we use the download builder at http://jqueryui.com/download/ to select the components that we need.   For the sake of simplicity and for learning, you can checkmark everything.  However, for production code, you want small file sizes and should deselect the items that you are not using.  Note that to use the Dialog widget, there are some dependencies.   You first checkmark the “Dialog” widget, and start unchecking things.  As you click around the checkboxes, the download builder will inform you of such dependencies.   For example, the Dialog widget depends on the Button Widget.  So we have to checkmark both of these (but uncheck the rest of the widgets is fine).  And they depend on Draggable and Resizable as well as all the UI Core.  But you can uncheck all the effects.

Then select a theme or customize one.  We pick the default UI-lightness theme.  Click the download button for the building.

4.  Unzip the download and you will find a “css” and a “js” folder, which you should copy to your project directory as shown.

5. Then include the script reference to the jquery-ui-1.10.4.custom.min.js file (as shown above outlined in red).   We are referencing the minified version (noted by the min.js extension) due to its smaller size.  We don’t need to reference the jquery-ui-1.10.4.custom.js (non-minified version).  That is just for use to review the code if needed.  Although the jquery-1.10.2.js jQuery core is included, we don’t need to reference that because we have already included jQuery core from the CDN in the previous step.

6.  Next add the reference to the minified CSS …

As with the js, we reference the minified version and keep the non-minified version there for future review.   Note that the min.css file is within a folder called “ui-lightness” within the CSS folder.

7.  Next, add the HTML for the popup dialog …

which we put at the bottom of the page above the script tags.   We give this dialog an id of “dialog”.   Adding a title attribute will give our dialog a title in its title bar.  Adding a style of display:none will hide the dialog from view initially.  Although we have inlined the style here, you could have equivalently put the display:none style in a CSS file.

8.  Give the dialog link an id.  As shown above, we gave the link the id of “dialog-link”.

9.  At the bottom of the file, we write some jQuery script within document ready that says, “whenever the dialog link is clicked, open the dialog”.

The line …

$(“#dialog”).dialog(“open”);

is what opens the dialog box.  In the click event, we have the line …

event.preventDefault();

to prevent the browser from taking the default action of following the link destination.

10.  Then we have code that initializes the dialog …

$(“#dialog”).dialog({ … });

Note that even though this code is after the click handler, it is executed before the click event.  It is executed right at document load.  The click event is only executed when the user clicks.

The stuff in the dot-dot-dot that we pass to the dialog method will set the attributes of the dialog.  Here we set the width of the dialog to be 400px and the dialog will not “autoOpen”.  The value “modal: true” is really important.  It is what makes the lightbox effect where the background is dimmed.

We also have a close button that when clicked closes the dialog …

$("#dialog").dialog({
 autoOpen: false,
 modal: true,
 width: 400,
 buttons: [
 {
   text: "Close",
   click: function() {
      $(this).dialog("close");
   }
  }
 ]
 });

Note that the buttons value is an array so that you can have more than one button in the dialog.  Each array is an object containing properties.  The text property is the text to be displayed on the button.  The click property is a function that is invoked when button is clicked.

11.  If you test out the code now, the dialog popup works and the close button works and you should get the lightbox effect.

12.  Because we didn’t specify a height for our dialog, it will automatically grow based on the amount of text in the dialog.  But if you have a lot of text, then its height will grow so much that the bottom and the close button may be off the bottom of the browser window.   In this case, we might want to force the dialog to be a certain height like …

$("#dialog").dialog({
 autoOpen: false,
 modal: true,
 width: 400,
 height: 300,
 buttons: [
 {
 text: "Close",
 click: function() {
 $(this).dialog("close");
 }
 }
 ]
 });

And interestingly enough, scroll bar automatically appear for you …

 

 

 

 

 

 

 

 

 

 

---