Jump to content
Sign in to follow this  
red

need an announcements window on loading a page

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.

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Since the call to set_cookie() is commented out no cookie is ever created. The overlay divs are positioned as "fixed" so their order in the HTML is irrelevant.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...