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!