260 1st Ave South Suite 200-Box#50 St. Petersburg, FL 33701
1+727.897.5456
info@enovatelearning.com

How to Remove the Close Button from the Lightbox Slide in Articulate Storyline

Image of Author Rema Merrick

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
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

The following steps take place on the lightbox slide.

Development Process

Below are the steps I took to develop the interaction. I did not give specific instructions on how to accomplish each task; I listed the tasks I completed to develop the interaction.

Create a new project in Storyline 360.

Hide the System Close Button

  1. Add an Execute JavaScript trigger when the timeline starts on this slide.
  2. Select the JavaScript link to open the JavaScript Editor.
  3. 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.

  1. Add a close button icon from the Content Library 360: X = 637, Y = 29, Width = 57, Height = 57.
  2. Add a rectangle shape for the custom exit (close) button: X = 637, Y = 29, Width = 57, Height = 57. Name the shape Exit Button.
  1. 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.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.