I want to have a javascript overlay box load on startup inviting users to participate in a feedback survey.
I am thinking about the overlay that comes down from the top of the screen and lets people either go to the survey or select “no thanks.” How can I do this?
I do not want a separate window. I want to do this using javascript, CSS only (No jQuery -- is it possible?)
To achieve this effect you'd simply scroll an absolute positioned DIV into the viewport. If the height of the DIV is 500, start with top: -500, and increase that value till the DIV is centered in the viewport. (Which would be viewport height - 500 / 2)
Usability studies show these modal "pop overs" aren't very popular though. You might end up annoying your visitor to the point where they don't want to take the survey at all, or even leave the site immediately. I'd suggest a less intrusive way to ask your visitors to answer a few questions.
I won't write the entire code sample here but the general idea is:
<div/> element with the desired style attributes and z-index=0 to enable it to overlay on top of your other elements. You can set the display to none if you want it to wait for page load. Don't forget to add the content with 'No Thanks' calling some hide function.
onLoad() which change the position and display to block of the <div/> we configured earlierThat's about it, just need to write some ugly code in JavaScript. I would suggest not doing a slide overlay but a centered one, just less code to write.
Ok, here's something for you to play with :-)
<html>
<head>
<style type="text/css">
#banner { position: absolute; width: 100%; left: 0; }
.banner-content { width: 400px; height: 200px; margin: 0 auto; background: green; }
</style>
</head>
<body>
<div id="banner">
<div class="banner-content">text
<a href="http://google.com">Yes</a>
<a href="#" onclick="Banner.hide();return false">No</a>
</div>
<div>
<script type="text/javascript">
var Banner=(function(){return{
init: function(){
this.ban = document.getElementById('banner');
this.ban.style.top=-this.ban.offsetHeight;
this.targetY=400;
this.speed=15; // increase this to slide faster
this.delay=15; // decrease to slide faster
this.show();
}
,show: function(){
var self=this;
this.anim=setInterval(function(){ self.slideDown() }, this.delay);
}
,hide: function(){
var self=this;
this.anim=setInterval(function(){ self.slideUp() }, this.delay);
}
,close: function(){ this.ban.style.display='none'; }
,slideDown: function(){
var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
if ((banTop+banH)<this.targetY) this.ban.style.top = banTop+this.speed;
else clearInterval(this.anim);
}
,slideUp: function(){
var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
if ((banTop+banH)>0) this.ban.style.top = banTop-this.speed;
else clearInterval(this.anim);
}
}}())
window.onload=Banner.init()
</script>
</body>
</html>