How to Make a Lightbox in Dreamweaver
You may have noticed a lightbox effect when Windows darkens your screen and displays a pop-up window. Web designers use lightboxes to draw attention to a single object on a Web page such as an image. Adobe Dreamweaver has no lightbox control, but it does allow you to include custom CSS in any HTML document. By adding a couple of CSS classes to a Dreamweaver page, you can create a professional looking lightbox that requires no complex JavaScript coding.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver and create a new HTML document. Click the "Code" tab to view the document's source code. Find the "<body>" tag in the Code window and paste the code shown below beneath that tag:
<input type="button" value="Show Lightbox" onclick="return manageLightbox('block')"/>
<div id="content">
Insert Overlay Content Here
<a href = "javascript:void(0)" onclick="return manageLightbox('none')">Close</a>
</div><div id="overlay" class="overlay" onclick="return manageLightbox('none')">
</div>The first line of code creates a button that makes the lightbox appear. Change "Show Lightbox" to any text you wish to appear on the button. Two div blocks appear below the button. The first div, whose id is "content," contains the content you wish to see in the lightbox when it opens. This div also contains a link. The link's text is "Close." When users click this link, the lightbox closes. The second div creates an overlay that darkens the Web page when users open the lightbox.
-
2
Paste the following CSS code into the document's style section:
.overlay
{
background-color: black;
-moz-opacity: 0.8; opacity: 0.90; filter: alpha(opacity=90);
display: none; position: absolute; top: 0px; left: 0px;
width: 100%;height: 100%;
z-index:900;
}.content
{
display: none; position: absolute; height: 50%; width: 50%; top: 25%; left: 25%;
border-style: solid; border-width: 4px; border-color: Yellow; background-color: #eeeeee;
z-index:901;
}The overlay class defines the background color of the overlay that covers a Web page when a user opens the lightbox. Note the second line of code in the class that defines opacity. These three values set the background's transparency. The opacity values listed set it to 90 percent in this example. The content class's important attributes are border-style, border-width, border-color and background-color. Adjust the values of these attributes to control the way the pop-up lightbox looks. For example, to change the border's color to blue, replace yellow with blue.
-
-
3
Paste the following JavaScript code before the document's closing "</head>" tag:
function manageLightbox(visibility) {
document.getElementById('overlay').style.display = visibility;
document.getElementById('content').style.display = visibility;
}This code runs when users click the button you added to the document's body section. The code causes the lightbox to appear and disappear depending on the button or link clicked.
-
4
Click the "Design" tab to return to design view. The "Show Lightbox" button appears on your document. A div block appears below the button. This div contains a "Close" link" in its upper right corner. Type a few words into the div block. These words will appear in the lightbox when it opens.
-
5
Click the "Code" tab to return to the Code window and find the following code:
<div id="content">
Delete that code and replace it with the code shown below:
<div id="content" class="content">
This code adds a reference to the "content" CSS class. That class makes the content and overlay divs invisible when your Web page loads.
-
6
Press "CTRL" and "S" to open a Save As window. Type a name for the document in the "File Name" text box and click "Save" to save the document.
-
7
Press "F12." Dreamweaver displays the Web page document in your default browser. Click the "Show Lightbox" button that appears on the Web page. The Web page darkens and the lightbox opens to reveal the words you typed. Click the lightbox's "Close" link to close the lightbox. The Web page returns to normal.
-
1
Tips & Warnings
Place any content you like inside the content div. Many site owners display images in their lightboxes.
Before making a change to the content div, return to the Code window and temporarily delete "class="content" from the content div. This allows you to see the div as you work on it in design view. After updating the div, replace the text you deleted so the div appears as follows: <div id="content" class="content">
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
