red Posted October 16, 2014 Share Posted October 16, 2014 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 More sharing options...
davej Posted October 16, 2014 Share Posted October 16, 2014 <!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 More sharing options...
red Posted October 16, 2014 Author Share Posted October 16, 2014 (edited) 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 October 16, 2014 by red Link to comment Share on other sites More sharing options...
davej Posted October 17, 2014 Share Posted October 17, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now