How to Remove the Close Button from the Lightbox Slide in Articulate Storyline
Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.
Author: Rema Merrick, MSIT
Published: November 21, 2022 | Updated: January 13, 2023
Time to Read: 3 minutes
Summary
Lightbox slides in Storyline come with a system close button like the one shown below.
If you want more behavior control of the close button or you want to change the look of the close button, you can hide the system control button and add your own. In this post, you will learn how to remove the system close button and add a custom close button.
Development Time
This task should take a few minutes to complete.
Prerequisites
To successfully complete this interaction, you’ll need to know how to do the following tasks in Articulate Storyline.
- How to create a new project
- How to insert a new slide
- How to add text, images and objects to a slide
- How to create an object trigger
- How to create a lightbox slide
Introduction
These instructions assume you’ve already created a new project and the lightbox slide. The only thing you need to do at this point is to remove the system close button and add a custom one. The following steps outline how to remove the system close button and create a custom close button.
Development Process
The steps to remove/hide the close button and add a custom close button take place on the lightbox slide.
Hide the System Close Button
- Add an Execute JavaScript trigger when the timeline starts on this slide.
- Select the JavaScript link to open the JavaScript Editor.
- Type the following JavaScript code. This code hides the system close button: Document.getElementById(“light-box-close”).style.display = “none”;
NOTE: The system close button displays on the lightbox slide in preview mode. Once you publish the file, the system close button disappears.
Notice how the slide looks with and without the system close button.
Add a Custom Close Button
Now you can add a custom close button. There are many design approaches you can take to create a custom close button. I’ll show you the design for one of my recent projects.
- Add a close button icon from the Content Library 360: X = 637, Y = 29, Width = 57, Height = 57.
- Add a rectangle shape for the custom exit (close) button: X = 637, Y = 29, Width = 57, Height = 57. Name the shape Exit Button.
- Add an object trigger to close the lightbox when the user clicks the Exit Button
Wrap Up
As you can see, it takes a simple six-step process to remove the Articulate Storyline lightbox system close button and create a custom one. And, you don’t need to know JavaScript.
Sign up to receive more eLearning how-to guides.
Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.
