How can we help you today?

How to Automatically Open a Lightbox/Popup When the Page Loads Using Custom JavaScript

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:


Example


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.

TABLE OF CONTENTS


Before we begin


The ShortPoint Code Design Element is available in ShortPoint SPFx versions 6.9.35.x and higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.


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 the 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 page load. Set the Linking Option to lightbox:


Add Design Element with Link and Lightbox Linking Option


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 the ID openMe to the ID field:


Add CSS ID


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:


Add CSS ID for Items


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:


For Classic pages

<script type="text/javascript">
(function() {
/**
* hook method to be executed as soon as shortpoint
* rendered on the page
**/
function ShortPointReady() {
shortpoint.$('#openMe').click();
};
// shortpoint not yet available in the page
// wait for shortpoint render dom event
document.addEventListener( 'shortpoint-render-above-fold', function() {
// exit on edit mode
if( window.shortPointInserter ) {
return;
}
setTimeout( ShortPointReady , 500);
});
})();
</script>


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:


Classic page Custom HTML


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

  • Option 2. For SharePoint 2016 and SharePoint 2013 Environments

Add a SharePoint OOTB Script Editor Web Part to the page, and paste the copied code there:


Embed Code


Finally, Save/Republish your page.


For Modern pages

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


Add a Code Design Element and paste the copied code to the JavaScript field, and click Insert to add the Design Element to the page:


Modern page Custom JavaScript


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


Finally, Save/Republish your page.


Result


That's it! Now, your popup will appear every-time a user visits your page.


Final Result


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