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:

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
• Step 1. Add a ShortPoint Design Element with a Lightbox Linking Option
• Step 2. Set an ID for the ShortPoint Design Element
• Step 3. Copy and add the Custom JavaScript to automatically open your link
  • For Classic pages
    • Option 1. For SharePoint 2019 and Office 365 Environments
    • Option 2. For SharePoint 2016 and SharePoint 2013 Environments
  • For Modern pages
• Result

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:

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:

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.

Step 3. Copy and add the Custom JavaScript to automatically open your link

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:

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:

Finally, Save/Republish your page.

For Modern pages

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

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.

Related articles:

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