I wanna show my visitors a message before they enter the site, and then allow them to continue to the main site using a button. I don't wanna move the main sites location either.
Similar to this:
<script>
function continue() { /* function to continue loading site */ }
</script>
<p>This is a message. <button onclick="continue();">I agree</button></p>
<script>
//stop loading what's below when someone enters the site, and display only the message
</script>
<html>
<body>
<p>This is my main site with a lot of content.</p>
</body>
</html>
I can't just cover the main site, I don't want any of it's functions to run when the visitor is reading the message.
Can anyone point me in the right direction?
Just show a large div covering the whole page.
<html>
<head>
<style>
.message{
position: fixed;
top: 0;
bottom:0;
left: 0;
right: 0;
z-index: 1000;
background-color: grey;
}
</style>
</head>
<body>
<div class="message" id="message">
<!-- message -->
Message<br/>
<button onClick="document.getElementById('message').style.display='none';">
Continue to Site
</button>
</div>
<div class="content">
<!-- Main content -->
Main content
</div>
</body>
</html></div>
You can't stop loading page by JS. In some situation JS can stop render page. But it still readable by machine/show-source.
If you don't want cover site, you can hide some elements by style="display:none".
If page must be unreadable by machine you must realize this on server side:
<?php
session_start();
if(!empty($_POST['policy'])) $_SESSION['accepted_policy'] = true;
if(empty($_SESSION['accepted_policy'])) {
?><form action="?" method="post">
<input type="checkbox" value="1" name="policy"> I've accepted ...<br />
<input type="submit" > </form>
<?php die();
} ?>
normal page
If you don't want execute any JS before continue() you can run it from this function instead $.ready()
Use window.stop() to stop the window from loading any further. However, this will not work in Internet Explorer or Microsoft Edge.
<html>
<head>
</head>
<body>
Content that will be shown
<script>
window.stop();
</script>
Content that will not be shown
</body>
</html></div>