How can we help you today?

How to Make Links or Buttons Open Content in Dialog/Lightbox

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:

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