Introduction

This is an advanced technique which allows you to use ShortPoint's internal APIs in order to achieve more complex functionality like triggering a Dialog/Lightbox window when clicking on a link or a button.

Before we start:

• You need to have ShortPoint SPFx installed in your environment.
• You need to have some basic JavaScript knowledge.

Step 1. Insert a link element into the page

You will have to insert an element which when clicked, will trigger the launch of the Dialog/Lightbox. In the example below, I have added a Link element which has the ID attribute set to be "myCustomID". You are able to use any selector you want, but for the sake of this exercise, we'll go with something simple.

Step 2. Launch the Theme Builder

Launch the ShortPoint Theme Builder by navigating to Site Contents > ShortPoint Dashboard > Theme Builder.

Step 3. Insert the following Custom JavaScript

shortpoint.$( "#myCustomID" ).click(function(event) {
  event.preventDefault();
  shortpoint.$.magnificPopup.open({
    items: {
      src: shortpoint.$( "#myCustomID" ).attr('href'),
    },
    type: "iframe"
  });
});

Click Apply, then Publish.

Step 4. See your script in action

Now, when the selected element will be clicked, instead of navigating to the page you linked to, it will not trigger the launch of a Dialog/Lightbox window, in the page you are currently located at.

Related articles:

• How to Make Custom JavaScript Execute on Partial Page Load on Modern Sites
  
• Execute Custom JavaScript on Specific Modern Pages