How To Create A Simple Splash Screen/Page?
I want to be able to design/implement a splash screen that originally goes over the home page (index.html). And when the visitor clicks on the enter page, you could say the Splash Screen disappears. I want to know how 开发者_开发百科to do that without creating another page and without having to redirect.
I also want to be able to give the user the option to "Do Not Show This Again"...
For example, http://www.runescape.com/
Thank you very much, Aaron Brewer
Have the default be that when a user visits a page, it pops up a screen using the Simplemodal jQuery plugin
When it loads it sets a cookie so that any future pageviews can check for that cookie or not. If its there, do not show the popup again.
I advise having a container that holds both the splash screen (probably a div with the size of the site, assuming it has a defined width and height), and the homepage.
The homepage should be hidden (visibility: hidden), because some search engines don't really "like" the display: none.
Then, use a cookie scheme so that when the user already visited the homepage, doesn't have to view the splash screen again.
What I've done in the past is via a PHP, read if there is a cookie or not, and if there is (meaning the splash has been seen already) change the class of the splash screen (hiding it) and change the class of the homepage (showing it).
Of course this can be done via javascript.
Warning: philosophical rather than practical answer ahead :-)
The most satisfactory way to implement a splash screen is to wait a few years until the HTML folk come to their senses and implement a <splash-image> tag that can be put into the <head> section of any page at all. It will be purely static (no links from it), completely optional, dismissed with a click or on expiry of a time limit, will support fade/slide/shatter and similar termination effects, won't take considerable effort to have it not look like a popup window, will not have a separate URL and will not mess with search engine robots. This is the best solution by far. But it's simply not an option available to anyone.... yet.
Despite the comment by Quentin above endorsed by several others, I believe there are useful contexts for splash screens. Some splash screens are NOT just "something pretty" - they can be legitimate content. I found this question while (somewhat fruitlessly) searching for a way to implement a daily splash screen that could be changed to provide context and emphasis for other website content.
When you consider the vast numbers of websites that offer dozens of low-value links that fight for the viewer's attention, 90% of which will never be followed (something even this awesome site is guilty of), it's not hard to imagine that certain pictures could be worth at least a thousand such words. On occasions it will even add considerable value for such a picture to be the first thing shown each time a site is visited.
Of course, if you just want a static splash screen to force some marketing message into your viewers' consciousnesses, then please don't - Quentin is right there :-)
Here is a sample webpage with a splashscreen and a 'Do Not Show Again' checkbox. When checked, a cookie is created to bypass the splashscreen for the visitor.
<html>
<script language="JavaScript" type="text/javascript">
function splashTimeout(mymsg,mymsecs)
{
var myelement = document.createElement("div");
myelement.setAttribute("style","background-color: grey;color:black; width: 450px;height: 220px;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold; align-items: center; justify-content: center; text-align: center;");
myelement.innerHTML = mymsg;
setTimeout(function(){
if (id('bypass').checked){
//set cookie
setCookie("splashbox","splashbox")
}else{
//clear cookie
setCookie("splashbox","")
}
myelement.parentNode.removeChild(myelement);
},mymsecs);
document.body.appendChild(myelement);
}
function getCookie(c_name)
{
var i,x,y,cookies=document.cookie;
x=cookies.substr(0,cookies.indexOf("="));
y=cookies.substr(cookies.indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
function setCookie(c_name,value)
{
var expiry=new Date();
expiry.setDate(expiry.getDate() + 100);
document.cookie=c_name + "=" + escape(value);
}
function check()
{
var username=getCookie("splashbox");
if (username!=null && username!="")
{
return
}
else
{
splashTimeout("Splash 1.0<br><br><br>Welcome to my page...<br><br><br><input type='checkbox' id='bypass'><label for='bypass'>Do not show again</label><br>",5000)
}
}
function id(myID){return document.getElementById(myID)}
</script>
<html>
<body onload=check()>
This is a sample website that shows a splashscreen when first visited. <br>
If the visitor checks the 'Do not show again' checkbox,
a cookie is created to bypass the splashscreen.<br>
To demonstrate, click the checkbox when the splash appears.<br>
When you refresh the page, the splash will not appear again.<br><br>
To clear the cookie and reset the splashscreen, click ResetSplash.<br>
<input type=button value=ResetSplash onclick="splashTimeout('Splash 1.0<br><br><br>The splash is reset.<br><input type=checkbox id=bypass hidden><br>',1000)"
</body>
</html>
加载中,请稍侯......
精彩评论