Load external Local Html Page and click a button to Return to Main

Question

How can I load external Html page (created in Animate CC local file) as a pop window in my main page. For example I want to have my main page with lets say 3 buttons. I click button one and that opens a popupwindow on my main page with content on it. maybe a video or video. Same for buttons 2 and 3 but they will hold different content. If they click a button on that page they will return to the main page. If I save this as one page it will be a huge file so I have to have multiple pages and communicate between each page to the one main page.

Any help is very much appreciated.

JoãoCésar17023019 · Answer

Hi.

Here is a sample of this kind of interactivity.

Preview:

https://bit.ly/34LXHty

Code:

JavaScript (index.html):

const buttons = document.getElementById("buttons");
const popUp = document.getElementById("popup");

buttons.addEventListener("click", e =>
{
	const id = e.target.id;

	popUp.src=`${id}/popup_${id}.html`;
	popUp.classList.add("active");
});

const close = e =>
{
	popUp.src="";
	popUp.classList.remove("active");
};

window.document.addEventListener("close", close, false);

Each Animate output / iframe / pop-up:

var root = this;

root.close.on("click", function(e)
{
	var event = new CustomEvent("close");
	window.parent.document.dispatchEvent(event);
});

Files / source / code / FLA:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/iframes_as_popups

I hope this helps.

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded