How to Automatically Open a Lightbox/Popup When the Page Loads (Modern Experience)

This article will demonstrate how to configure a Lightbox to open automatically when your SharePoint page loads.

NOTEIf you would like to open a popup based on a specific condition, follow our article on How to Automatically Open a Lightbox/Popup When the Page Loads Based on Some Condition.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the SharePoint page
  • Step 2: Add a Link and a Linking Option
  • Step 3: Set an ID for the ShortPoint Design Element
  • Step 4: Copy the code
  • Step 5: Paste the code
  • Step 6: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have a Design Element that supports adding links to your page. 
• You are using SharePoint Modern Experience. If you are using SharePoint Classic Experience, check out How to Automatically Open a Lightbox/Popup When the Page Loads (Classic Experience).

Interactive Tutorial

Before starting the interactive tutorial, copy the code below:

if(!shortpoint.runTest('sp-edit-mode')) { shortpoint.$('#openMe').click();}

NOTEIf you are using Design Elements with the Items / Tiles tab (for example, Slideshows), you need to set the ID from the Items/Tiles tab. To do that, Enable Custom Settings and add the openMe ID (or any ID name you prefer) there:

Step-by-step Tutorial

Follow the steps for a detailed guide on how to automatically open the Lightbox window when the page loads:

Step 1: Edit the SharePoint page

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Then, click the pencil icon.
• Click the Switch to Grid Mode icon.

Step 2: Add a Link and a Linking Option

NOTEBefore proceeding, make sure that you already have a Design Element that supports adding links to your page.

• Look for the Design Element you want to use and click the cogwheel icon.
• Specify the Link of the content you want to open automatically.

• Select Lightbox as the Linking Option.

Step 3: Set an ID for the ShortPoint Design Element

• Switch to the Custom CSS tab.
• Add "openMe” to the ID field. 

NOTEYou can use any ID name in the ID field. For the purpose of this guide, we just used openMe.

• Click Update.

NOTEIf you are using Design Elements with the Items / Tiles tab (for example, Slideshows), you need to set the ID from the Items/Tiles tab. To do that, Enable Custom Settings and add the openMe ID (or any ID name you prefer) there:

Step 4: Copy the code

• Copy the code below:

if(!shortpoint.runTest('sp-edit-mode')) {
  shortpoint.$('#openMe').click();
}

• Click Insert.

NOTETo know more about the Code Design Element and how to use it, check out Introducing ShortPoint Code Design Element.

Step 6: Save

• Click the eye icon to see how your page will look in real-time.

• Once satisfied, click Save.

That’s it! You now know how to set the Lightbox to open automatically when the page loads.

Related articles:

• How to Automatically Open a Lightbox/Popup When the Page Loads Based on Some Condition
• Execute JavaScript After ShortPoint Elements Render Event
• How to Automatically Open a LightBox When the Page Loads (Classic Experience)