How can we help you today?

Lightbox Does Not Work in Modern SharePoint Pages

Problem

From a modern page, you have linked a ShortPoint element to another page and you have selected the light-box option, but after saving the page and clicking the linked element, the browser navigates to the new page without opening the light-box.


Reason

In modern SharePoint, a user's click is being intercepted before it gets to ShortPoint. So by default, in modern pages, the SharePoint platform sends you to a new page before our code gets the chance to respond to the users click.


Solution

Please follow the steps below to fix the issue:


1. Open ShortPoint's modern Themebuilder on your site


2. In Themebuilder, navigate to Utilities > Custom Javascript


3. Copy the Javascript code below

/* Begin lightbox in modern page fix */
!function() {
  function ecallback(e) {
    var target = e.target;
    
    if (target.className.indexOf('shortpoint') > -1 ) {
      
      var n = 6, parent = target, linkFound = false;
      while (n > 0) {
        if (parent instanceof HTMLAnchorElement) {
          n = 0;
          linkFound = true;
          break;
        }

        parent = parent.parentElement;
        --n;
      }

      if (linkFound) {
        var shortpointData = null;
        while (!shortpointData) {
          shortpointData = parent.dataset.shortpoint;
          parent = parent.parentElement;
        }
      }
      
      if (shortpointData) {
        var txt = "{" + decodeURIComponent(shortpointData) + "}";
        var json = JSON.parse(txt);

        var type = Object.keys(json)[0];
  
        if (json[type].linking == 'lightbox') {
          shortpoint.$.magnificPopup.open({
            items: {
            src: json[type].link,
          },
            type: "iframe"
          });

          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      }
    }
  }
  
  window.addEventListener("click", ecallback, true)
}();
/* End lightbox in modern page fix */


4. Paste it in the Custom Javascript textarea, see the screenshot below


5. Click Publish


The issue should now be resolved.

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