Jump to content

need an announcements window on loading a page


red

Recommended Posts

I need a window on loading a page. No need to build one for me if someone knows where there's a script that is relatively safe and simple (as possible). I have no java, limited css, Here's what I'd like:

 

- when I have an announcement to make, the window will superimpose on the page (i can activate when needed or comment out when not in use).

- it should be css styleable in general features - height/width/position, fonts/sizes, color, borders, that sort of thing)

- should have one of those 'x' close options in its upper right corner;

 

[Optional, but nice:]

-- has a semi-transparent background (can see page behind it) -- i'm guessing that takes some of those vendor selectors (-webkit/-moz...etc.) & some kind of rgb/gradient thing which is beyond my current css knowledge set;-- times-out, so that after say n-seconds it will fade out if the user doesn't close it or click a link in the message.

 

That's about it. I know there must be some good ones around, but I wouldn't be able to tell which are safe and reliable. If anyone knows/can point me in the right direction, much obliged -- red.

Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>modal with timeout</title><style>#popupdiv{display:none;position:fixed;top:20%;left:0;right:0;margin: 0 auto;width:450px;height:300px;background-color: #eee;border: 1px solid #000;border-radius: 15px;text-align: center;z-index: 2;opacity: 1;filter: alpha(opacity=100);}#overlaydiv{display:none;position:fixed;background-color: #555;left: 5%;top: 5%;width: 90%;height: 90%;border-radius: 15px;text-align: center;margin: 0 auto;z-index: 1;opacity: 0.6;filter: alpha(opacity=60);}#btn1{float:right;margin:3px;border-radius: 15px;}</style><script>window.onload = init;function init(){if (!cookie_exists()){setTimeout(popup,3000);//display the modal popup in three seconds}}function cookie_exists(){var cookie_name = 'has_seen_popup001';var doc_cookie_str = document.cookie;var idx = doc_cookie_str.indexOf(cookie_name + "=");if (idx == -1){ return false; }else{ return true; }}function set_cookie(expire_days){var cookie_name = 'has_seen_popup001';var exp_date = new Date();if (parseInt(expire_days)>0){exp_date.setDate(exp_date.getDate() + expire_days);};document.cookie = cookie_name + "=true; expires="+exp_date.toUTCString();}function popup(){var ov = document.getElementById("overlaydiv");var pop = document.getElementById("popupdiv");var btn1 = document.getElementById("btn1");pop.style.display = 'block';ov.style.display = 'block';btn1.onclick = acknowledge;setTimeout(dismiss,30*1000);//dismiss in 30 seconds}function acknowledge(){// set_cookie(30); //set cookie -- expires in daysdismiss();}function dismiss(){var ov = document.getElementById("overlaydiv");var pop = document.getElementById("popupdiv");pop.style.display = 'none';ov.style.display = 'none';}</script></head><body><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p><p>Paragraph 3</p><div id="overlaydiv"></div><div id="popupdiv"><input type="button" id="btn1" value="Ok"/><br style="clear:both;"/><br/>Please read this message. Blah blah blah.<br/></div></body></html>
Link to comment
Share on other sites

Thanx Dave. I hope you had this on hand, and didn't have to make it up special.

 

The question I have is about cookies. I don't want to store anything longer that the visitor/s session to the site (though that may include their visit to other pages) - the announcement window will only appear on the single 'home page'. After the visitor ends the session, the information should disappear. If they come back, they'll just have to see the announcement again. (we've promised our users there would be no cookies.) Will setting the expire time to '0' or '1' do that? or do I need to do something else for it to persist only for the session?I take it the "opacity" and "filter" properties are what control the transparency of the background. Thank you - I learned something and it doesn't look too complicated. There seem to be a lot of things in css now that weren't available a few years ago. I'll have to do some more reading about the newer stuff.

 

I'm curious about the div order in the markup. The overlay (i gather that's the window structure) comes after the text paragraphs. does that mean the text is seen "behind the window" -- my naive intuition says the text would normally go on top? (but I'm really ignorant, so...)

 

thanks much.

Edited by red
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...