How can we help you today?

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

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.


Step 3. Add Custom JavaScript to automatically click 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:


<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 your page.


Result


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



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