How can we help you today?

How to Close Lightbox Popup Using Your Custom Link

Many times, we get to situation that we used opened a modal box using ShortPoint lightbox effect and we need to close the light box from within the page inside it. Best real life example for this is we have a TOC and a link at the end of the TOC saying I agree which should close the lightbox.



Before we begin


We have prepared two pages for this example here;


  1. The caller - which will open the lightbox
  2. The child - the page which is going to open in lightbox


In the caller page, we have a button which is going to open the child page in lightbox.



Add script In the child page


In child page, add a new Script Editor Webpart in the position where you want to place the Link (for example I agree) to close the light box. the content of the script editor webpart should be:


<script type='text/javascript'>
document.write("<div onclick=\"window.top.shortpoint.$.magnificPopup.close();\" style=\"float:right; color: blue; text-decoration: underline; cursor: pointer\"> I agree </div>");
</script>


the main part here is the click event of the div which should be:


window.top.shortpoint.$.magnificPopup.close();


You can change the rest of the part according to your specification. For example you can:


  • Use anchor or any other control instead of DIV
  • Apply your own style effect
  • Use CSS in class attribute


Here is an animation of the whole step:


Working Demo


Happy lightboxing!

  

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