In this article, we will show you how to automatically open a popup window/lightbox once the page is loaded. This tutorial might be helpful for you if you would like to display an important message (news, announcements etc.) to all site visitors.
This is how it will look like:
Note: If you would like to open a popup based on some specific condition, please follow our article on How to Automatically Open a Lightbox/Popup When the Page Loads Based on Some Condition.
Before we begin
This solution is only applicable for Classic SharePoint experience.
Step 1. Add a ShortPoint Design Element with a Lightbox Linking Option
Add any ShortPoint Design Element that supports adding links to your page that supports adding links.
For the purpose of this article we will use Button Design Element.
In the Settings tab, specify the Link pointing to the source of the content (page, image, animation etc.) that you want to open automatically on a page load. Set the Linking option to lightbox:
Step 2. Set an ID for the ShortPoint Design Element
For the same Design Element added in the previous step, switch to the Custom CSS tab, and add an ID openMe to the respective ID field:
Note: If the ShortPoint Design Element that has your popup link resides inside the Items/Tiles tab (for example, Slideshows), you need to set the ID from the Items/Tiles tab, not from the Custom CSS tab. Click Enable Custom Settings and add the ID there:
Then, click Insert/Update to add/update this Design Element.
So far, we have created a link that will open in a popup once you click it. The last step is to make it open automatically once the page is loaded. To do that, copy the following code:
Depending on the SharePoint environment you are using, choose the next option:
Option 1. For SharePoint 2019 and Office 365 Environments
Add a Code Design Element and paste the copied code to the HTML field, and click Insert to add the Design Element to the page:
Note: To know more about Code Design Element and how to use it, check our solution articles:
- Introducing ShortPoint Code Design Element
- Example Use Cases for ShortPoint Code Design Element: Part 1
- Example Use Cases for ShortPoint Code Design Element: Part 2
Add a SharePoint OOTB Script Editor Web Part to the page, and paste the copied code there.
Finally, save your page.
That's it! Now, your popup will appear every-time a user visits your page.