Start your All-Access Pass to unlock this challenge
On our site, there is one section that is very special: We expose the secrets to creating the world's most perfect pizza. But not all users are ready for this earth-shattering information. And so, I've decided to hide the entire page with a button and open a big dialog on the front page of that section...
Here's how it looks!
<html>
<head>
...
</head>
<body>
<p id="page_warning">
This page has been hidden for security reasons. Please click
<button
class="btn btn-primary"
onclick="javascript:document.getElementById('my_great_modal').style.display: block"
>
here
</button>
if you are ready to uncover some true secrets!
<p>
<div id="my_great_modal" style="display: none">
<h1>Welcome to our Pizza Section!</h1>
<p>Proceed only if you are ready for pizza to change your life!</p>
<button
class="btn btn-primary"
onclick="javascript:hideDialogAndShowPage()"
>
Proceed
</button>
</div>
<div id="the_rest_of_my_page" style="display: none">
...
</div>
<script>
window.hideDialogAndShowPage = () => {
document.getElementById('my_great_modal').style.display='none';
document.getElementById('page_warning').style.display='none';
document.getElementById('the_rest_of_my_page').style.display='block';
}
</script>
</body>
</html>
This works as expected, but I'm a bit nervous about leaving too much time for our users to decide. They should be quick! So I've added a timeout on the main JavaScript of the page to force users away after a certain amount of time.
window.setTimeout(() => {
window.location.href = '/';
}, 10000);
How can we use Turbo Drive (instead of just window.location.href=
)
to perform a page visit without doing a full refresh?