Modal - need it to open once only

Community Beginner ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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.

Views

4.7K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Oct 09, 2018 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>

<meta charset="UTF-8">

<title>Modal</title>

<!-- Bootstrap Core CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Latest jQuery Library -->

<script s

...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

You could use sessionStorage - code example below:

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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">

>

    <div class="modal-dialog modal-dialog-centered" role="document">

      <div class="modal-content">

        <div class="modal-header">

         

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

        </div>

       <div class="modal-body 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.<br><br>

        <div class="text-center">

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

        </div>

      </div>

        <div class="modal-footer mx-auto">

          <!-- Make sure to include the 'nothanks' class on the buttons -->

          <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><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

  </div><!-- /.modal -->

<script>

    // 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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 08, 2018 Oct 08, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 09, 2018 Oct 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2018 Oct 09, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

<title>Modal</title>

<!-- Bootstrap Core CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Latest jQuery Library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Bootstrap Core JS -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Cookie JS for Modal -->

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>

<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>

<div class="modal fade" id="myModal">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-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>

<div class="modal-footer">

<!-- Make sure to include the 'nothanks' class on the buttons -->

<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><!-- /.modal-content -->

</div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

// 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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 09, 2018 Oct 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 09, 2018 Oct 09, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 05, 2019 Oct 05, 2019

Copy link to clipboard

Copied

Hi Osgood,

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 05, 2019 Oct 05, 2019

Copy link to clipboard

Copied

LATEST
i used your session storage sample for my code.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines