Modal - need it to open once only

Report · Oct 08, 2018

Hello, I need a modal for the index page of a large website - it's for users to accept internet policy to proceed on to the website. I've managed to get it to open on page load unfortunately each time a link to the home page is clicked or the page is refreshed the modal pops up again Can anyone advise me on how to keep it closed after the first visit please? I imagine javascript is involved but I'm not experienced in that.

Many thanks.

Report · Oct 08, 2018

You need to create a cookie when the user closes the modal.

https://coderwall.com/p/gnqdpg/dismiss-bootstrap-modal-forever-with-jquery-cookie-on-click

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 08, 2018

Thank you ever so much for the link Nancy - it seems to have worked! The only problem I have though, and it's probably my badly worded first question, is that I would like the modal to appear once per session, ie when the user has left the site/closed the browser, but would like it to show up when they use the site another time, if that makes sense?

Report · Oct 08, 2018

You could use sessionStorage - code example below:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

if (sessionStorage.getItem('modal') !== 'true') {

$('body').append('<div class="modal_overlay">'+

'<div class="modal">'+

'<h2>Modal</h2>'+

'<p>Modal content goes here</p>'+

'<button class="closeModal">Close</button>'+

'</div>' +

'</div>')

sessionStorage.setItem('modal','true');

setTimeout(function(){

$('.modal_overlay').fadeIn(); },

500);

}

$('.closeModal').css('cursor' , 'pointer').click(function(){

$('.modal_overlay').fadeOut();

});

$('.reset').on('click',function(){

sessionStorage.setItem('modal','');

});

</script>

<style>

body {

margin: 0;

}

.modal_overlay {

display: none;

position: fixed;

top: 0;

height: 100vh;

width: 100vw;

background-color: rgba(0, 0, 0, 0.5);

}

.modal {

background-color: #fff;

width: 700px;

margin: 0 auto;

text-align: center;

padding: 20px;

position: relative;

top: 50%;

transform: translateY(-50%);

}

.closeModal {

display: block;

margin: 0 auto;

background-color: #000;

color: #fff;

font-size: 16px;

border: none;

padding: 7px 15px;

border-radius: 4px;

}

</style>

</head>

<body>

<a href="#" class="reset">Reset Storage Session</a>

</body>

</html>

Report · Oct 08, 2018

Thank you for your reply Osgood. I will definitely look into your answer. I really know nothing about javascript etc so as you can imagine, I have a lot to learn!

Report · Oct 08, 2018

This is what I ended up with - not sure how to turn it into a session cookie though.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="bpsModalLabel" aria-hidden="true"

data-backdrop="static" data-keyboard="false">

>

<h5 class="modal-title mx-auto" id="bpsModalLabel">SAFEGUARDING & GDPR NOTICE</h5>

</div>

We are committed to safeguarding and promoting the welfare of children and young people. To view our website we ask you to accept our policies. For more information please click on the button below.<br><br>

<a href="safeguarding_gdpr_acceptance.html" target="_blank"><button type="button" class="btn btn-primary">View our policies</button></a>

</div>

<a href="http://www.google.co.uk"><button type="button" class="btn btn-primary">I don't accept</button></a>

<button class="btn btn-primary nothanks" data-dismiss="modal" aria-hidden="true">I Accept</button>

</div>

</div>

</div>

</div>

// Delayed Modal Display + Cookie On Click

$(document).ready(function() {

// If no cookie with our chosen name (e.g. no_thanks)...

if ($.cookie("no_thanks") == null) {

// Show the modal, with delay func.

$('#myModal').appendTo("body");

function show_modal(){

$('#myModal').modal();

}

// Set delay func. time in milliseconds

window.setTimeout(show_modal, 1000);

}

// On click of specified class (e.g. 'nothanks'), trigger cookie, which expires in 100 years

$(".nothanks").click(function() {

$.cookie('no_thanks', 'true', { expires: 36500, path: '/' });

});

</script>

Report · Oct 08, 2018

Looks like you're using Bootstrap. You could place a 24 hour expiration on your cookie.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Oct 09, 2018

I'm confused again - sorry! I think (?!) I need a cookie that expires when the user closes the browser - is that called a session cookie? So that when someone opens the website they have to click the "Accept" button to see the website but when they leave the site and revisit, they have to click accept again. Or, failing that, could I place a 1 hour expiration code on the cookie - would this line need altering? [ $.cookie('no_thanks', 'true', { expires: 36500, path: '/' });] Sorry to be a pain but any help on this would be brilliant.

Report · Oct 09, 2018

The cookie is set to expire in 1 minute..............(see code below)......... alter to how many minutes/hours/days you think you need.

Only thing with cookies is you are meant to give a warning message to your users that you are putting something on their computer.

<!DOCTYPE html>

<html>

<head>

<title>Modal</title>

<style>

.modal-footer {

display: flex;

justify-content: center;

}

.modal-dialog {

margin: 0 auto;

padding: 0;

position: relative;

top: 40%;

transform: translateY(-40%);

}

</style>

</head>

<body>

<p class="text-center">We are committed to safeguarding and promoting the welfare of children and young people. To view our website we ask you to accept our policies. For more information please click on the button below.</p>

<p class="text-center"><a href="safeguarding_gdpr_acceptance.html" target="_blank"><button type="button" class="btn btn-primary">View our policies</button></a></p>

</div>

<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">I Don't Accept</button>

<button class="btn btn-default decline" data-dismiss="modal" aria-hidden="true">I Accept</button>

</div>

</div>

</div>

</div>

// Delayed Modal Display + Cookie On Click

$(document).ready(function() {

// If no cookie with our chosen name (e.g. decline)...

if ($.cookie("decline") == null) {

// Show the modal, with delay func.

$('#myModal').appendTo("body");

function show_modal(){

$('#myModal').modal();

}

// Set delay func. time in milliseconds

window.setTimeout(show_modal, 500);

}

// On click of specified class (e.g. 'decline'), trigger cookie, which expires in 100 years

$(".decline").click(function() {

var date = new Date();

var minutes = 1;

date.setTime(date.getTime() + (minutes * 60 * 1000));

$.cookie("decline", "true", { expires: date, path: '/' });

});

</script>

</body>

</html>

Report · Oct 09, 2018

Ooh thank you! I'm just in the middle of some work but will try this very soon - will let you know how it goes. I've got a lot to learn haven't I!! Thanks a million

Report · Oct 09, 2018

wb23kb wrote
Ooh thank you! I'm just in the middle of some work but will try this very soon - will let you know how it goes. I've got a lot to learn haven't I!! Thanks a million

Use the code I supplied as I have changed the class 'nothanks' to 'decline'........otherwise your wording is still the same. I've just centered the modal vertically in the browser window and the footer buttons horizontally for a better visual user experience.

Report · Oct 05, 2019

Hi Osgood,

Report · Oct 05, 2019

i used your session storage sample for my code.

Modal - need it to open once only

1 Correct answer

Photos