Without going into any sort of discussion on what kind of site we're talking about ('nuf said on that topic, I suspect) there are a couple of ways you can accomplish this. The easiest is to have your home page simply indicate the kind of content they're about to see and offer two options for proceeding: if you're over 18, click to get to our "real" home page, if you're not, click to go to Google.com or some other innocuous Web site.
That's a simple and straightforward solution that has the benefit of letting you mask your content from younger eyes too, so it's what I would suggest, but if you really do want to create a JavaScript pop-up window, you'd want to tie it to the onload event, which means that the page will fully render, images and all, then the window will pop up. Think about that.
Still want to proceed? Okay, here's some JavaScript code:
<html>
<head>
<title>test page</title>
<script type="text/javascript" charset="utf-8">
function doOnLoad()
{
if (confirm("Do you want to see this page??")) {
self.location="http://www.google.com/"
};
}
</script>
</head>
<body onload="doOnLoad()">
<h1>This is a test page</h1>
If this is working properly, the page will load, then a window will pop up
asking "do you want to see this page?" If you answer affirmatively, the
window goes away. If you say no, then you're bounced to Google.
</body>
</html>
In a nutshell, what this does is invoke "doOnLoad" when the page has fully loaded (which is why it has to appear in the "body" HTML tag), which uses the built-in confirm() function to put up a dialog box like this:
It's not a great solution as you can see because "Cancel" means you're going to stay on the page and "Okay" means you're leaving, so it's going to be tricky to word a question where that then makes sense. Perhaps "If you're under 18, please click on "Okay", otherwise we'll assume that you are old enough to see the content of this page." but even that's pretty awkward.
There are more sophisticated solutions you could utilize, including a DHTML layer pop-up that grayed out the underlying page and had logical yes/no button labels, but that's a lot more work and it might well not be worth the hassle. Again, I suggest that having a different home page that offers two options for proceeding is likely your best solution in this situation.
Thanks to Darrell Brogdon, Robert Bell and Luke Kingland for their suggestions on the above JavaScript code.
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
What's wrong with redirecting to a different site it they press Cancel?
if ( ! confirm("Do you want to see this page??")) {
self.location="http://www.google.com/"
};
I guess the downside is that the "ok" button is the default, making it too easy to click "by accident"?
I agree that it's better to not have the page appear at all, until they claim that they are over 18.
Of course, then you have the whole question of "what prevents a 17-year-old from clicking 'yes, I'm 18'?"