Skip to main content
wb23kb
wb23kb
Participating Frequently
October 8, 2018
Answered

Modal - need it to open once only

  • October 8, 2018
  • 2 replies
  • 7838 views

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.

This topic has been closed for replies.
Correct answer osgood_

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.


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>

2 replies

O
osgood_
Brainiac
October 8, 2018

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>

    wb23kb
    wb23kbAuthor
    Participating Frequently
    October 8, 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!

    wb23kb
    wb23kbAuthor
    Participating Frequently
    October 8, 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">

    >

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

    Nancy OShea
    Nancy OShea
    Community Expert
    October 8, 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
      wb23kb
      wb23kbAuthor
      Participating Frequently
      October 8, 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?

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices