Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
How to make overlay container disappear on click?

micaelo
Registered User
Quote
2022-10-20 23:47:43

I have created an overlay container which I want to place occasionally on the startpage to alert website visitors of recently added content. It looks like this:
🔎︎

I want it to disappear if visitors click on OK. Any idea on how can I get this to work?


niko
Moderator
Quote
2022-10-21 13:25:06

In the hyperlink for your ok button, put a javascript code and make it like this:

javascript:document.getElementById('idofyouroverlay').style.display = 'none';


Only replace that idofyouroverlay with the id of your overlay.


micaelo
Registered User
Quote
2022-10-21 14:39:11

Hm, this does not work. Upon click on OK the entire page disappears and the browser displays "none" in the upper left corner.


micaelo
Registered User
Quote
2022-10-21 17:53:38

As said, inserting the hyperlink as proposed did not work. However, in an earlier thread https://www.ambiera.com/forum.ph... I have found a code which does the trick (I just replaced "yourimage" with my container ID and removed the blank from "on click"), with the only difference that website visitors don't necessarily have to click the OK button but can click just anywhere on the page to make the overlay disappear.
That's good enough. I'm not going to use the overlay very often, anyway.


micaelo
Registered User
Quote
2022-10-22 12:13:11

I finally got it: I removed the hyperlink from the OK button. Instead, I gave the button the additional HTML code as shown here
🔎︎
That works exactly as I want it


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Inter?ational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact