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!