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;
- The caller - which will open the lightbox
- 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:
the main part here is the click event of the div which should be:
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: