How to get a sliding javascript overlay to load on startup
I want to have a javascript overlay box load on startup inviting users to participate in a feedback survey.
I am thinking a开发者_如何学运维bout 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.
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>
I won't write the entire code sample here but the general idea is:
- create a
<div/>element with the desired style attributes andz-index=0to enable it to overlay on top of your other elements. You can set thedisplaytononeif you want it to wait for page load. Don't forget to add the content with 'No Thanks' calling some hide function. - Define a JS function to be called
onLoad()which change the position anddisplaytoblockof the<div/>we configured earlier
That'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.
加载中,请稍侯......
精彩评论