How can we help you today?

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.


open lightbox automatically


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


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:


items tab

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.


Edit

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


Switch to Grid Mode icon



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.


Link


  • Select Lightbox as the Linking Option.


Lightbox


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.


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:


items tab

Step 4: Copy the code


  • Copy the code below:
if(!shortpoint.runTest('sp-edit-mode')) {
  shortpoint.$('#openMe').click();
}

Step 5: Paste the code

  • Click the gray plus icon.
  • Use the search box to look for the Code Design Element and click it.
  • Paste the code you copied in Step 4 in the JavaScript field.


javascript code


  • Disable Sandbox mode.


Sandbox mode

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


eye icon

  • Once satisfied, click Save.


Save


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


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more