Consent overlay
Using this code will make it so it's only displayed once (unless they clear the cache for their browser) to the person who sees it if they press Enter. Pressing Exit will display it again on the next visit.
<script>
var checkState= localStorage.getItem('checkState');
if(checkState=="true"){
function openDialog(okno) {
document.getElementById(okno).className+= "hidden";
}
}else{
function openDialog(okno) {
document.getElementById(okno).className+= " show";
}
};
function closeDialog(okno) {
document.getElementById(okno).className = "dialog-cover";
}
</script>
<style>
@media screen and (max-width: 770px) {
.dialog {
position: absolute !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
top: 0 !important;
border-radius: 0 !important;
padding: 50px 0px !important;
}
}
.dialog-background {
width: 100%;
height: 100%;
background: rgba(0,0,0,.85);
position: fixed;
display: none;
z-index: 99;
}
.dialog {
padding: 40px;
width: 50%;
position: fixed; left: 45%; top: 40%;
height: auto;
margin-top: -100px;
margin-left: -25%;
background: #fff;
display: none;
z-index: 100;
text-align: center;
border-radius: 3px;
}
.cButton {border: none;color: #fff;padding: 10px 30px;cursor:pointer;}
.hidden {display: none !important;}
.show .dialog, .show .dialog-background {display: block;}
.cButtonConsent {border: 1px solid #1ba38c;background: none;color:#1ba38c;}
.cButtonConsent:hover{background: #1ba38c;color:#fff;}
.cButtonNoConsent {border: 1px solid #ca5a5b;background: none;color: #ca5a5b;}
.cButtonNoConsent:hover{background:#ca5a5b;color:#fff;}
.cButtonNoConsent, .cButtonConsent {transition: .1s linear all;}
.cButtonThird {background:none;color: #a2a2a2 !important;margin-top: 10px;font-size: 0.9rem;}
</style>
<div id="okno" class="dialog-cover show">
<div class="dialog-background"></div>
<div class="dialog">
<h1>Please give your consent</h1>
<p>This website contains explicit content</p>
<br>
<div align="center">
<button class="cButton cButtonConsent" onclick="closeDialog("okno");localStorage.setItem('checkState','true');">Enter</button>
<button class="cButton cButtonNoConsent" onclick="location.href='https://google.com';">Exit</button>
</div>
</div>
</div>
<script>
openDialog("okno");
</script>
If the above version doesn't look good in the template for the user, try the one below (download)
Pressing Enter will simply close the block and remove the dark area around the box.
Pressing Exit will redirect user to google.com.
Where do I paste the code?
Only on specific pages
- PAGES > "The page" > SEO SETTINGS > HTML-CODE IN HEADER
On all pages (recommended)
- SETTINGS > SETTINGS > HEADER/FOOTER > HTML CODE
- What should I change?
The code you should change (if needed) is the text I've outlined:
<h1>Please give your consent</h1>
<p>This website contains explicit content</p>
<br>
<div align="center">
<button class="cButton cButtonConcent" onclick="closeDialog("okno")">Enter</button>
<button class="cButton cButtonNoConcent" onclick="location.href='https://google.com';">Exit</button>
</div>
3 button version
You can download this TXT file if you would want to have a third button in the box. In this example the gray button leads to the privacy policy AND closes the consent box. The other buttons works like before.
The difference in the 3 button version is the extra gray text below the buttons. Change the first red field for what link it should send you to. The second red field is the text of the button:
If you want to change other stuff, then have a go! Ask me if you want something special added to this :)