Adding a pop up to a HTML5 canvas

[@russellsdesk]

Hello.

Looking for some advice please?

I need to create a web banner which has a line of copy. When the viewer clicks on the copy, a pop up/overlay of copy will appear with a message. When the viewer has read it, they will click a cross to close the overlay/pop up. I also need to add a click tag to the file.

Is the above possible? Any advice/tutorials would be great appreciated.

[kglad]

this.yourcopy.addEventListener("click",f);

function f(){

window.open("https://adobe.com","_top","left=100,top=100,width=320,height=320");

}

[@russellsdesk]

Thank you for replying. I think I need more hand-holding...

[kglad]

what don't you understand?

[@russellsdesk]

Hi.

I'm ok with converting the text to a button. How do I action the button to display another message. Then add another button to this message for it to close.

Thank you

[kglad]

is this an unrelated question to the popup question?

[@russellsdesk]

I don't think so.

Sorry for any confusion.

Basically, I want to create a popup window with a close button. The viewer clicks on a line of copy, the pop up window appears. When the viewer has read the copy in the pop up window, they click a button to close it.

[kglad]

the popup is a browser popup and includes a close button.  

do you actually want something else? eg, a pseudo popup consisting of a movieclip, for example.

[@russellsdesk]

Hello again.

Thank you for bearing with me.

Here's the scenario. When the viewer clicks on 'important information' [Frame 1] a window/overlay/pop up appears [Frame 2] when the viewer has read it, they click on the cross to close the window/overlay/pop up and the animation carries on.

The HTLM5 can only play for 30 secs when on the internet. But the user can click on 'important information' at any time.

I don't know how to achieve this.

Frame 1

Frame 2

[kglad]

there are a number of ways.  one is to create a movieclip of your popup window (with it's close "x" converted to a button and assigned an instance name, eg x_btn) and

0. assign the code on popup's timeline for the x_btn to work:

this.x_btn.addEventListener("click",closeF.bind(this));

function closeF(e){

this.x_btn.parent.parent.removeChild(this.x_btn.parent);

}

1. place popup movieclip in the frame where you want it to appear on stage in the position where you want it to appear and assign an instance name (eg, popup_mc)

3. at the initial frame of your project add:

this.popup_mc.parent.removeChild(this.popup_mc);

convert important information into a movieclip and assign an instance name, eg imporant_info_mc

then add a click listener where important information appears:

this.important_info_mc.addEventListener("click",popupF.bind(this));

function popupF(e){

this.addChild(popup_mc);

}

[@russellsdesk]

Thank you ever so much for bearing with me.

I've persevered and got it to work. It may be a bit 'Heath Robinson', and not quite as per your instructions, but I've got it to work (hopefully).

Thanks again.

[kglad]

you're welcome.