Jump to content

Modal on homepage needs to use cookie.

Recommended Posts


I have used some code for a Modal on the homepage of my store. However I would like this to use a cookie so that it doesn't show every time someone comes to my page. Does anyone know how I would be able to achieve this

Apologies if this seems a silly question but I am very new to all of this "coding" and getting the Modal to work was challenging enough!....

Thanks in advance!

My code is currently as follows:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: ; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 200px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;

.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
<h2><!-- The Modal --></h2>

<div class="modal" id="myModal"><!-- Modal content -->
<div class="modal-content"><span class="close">&times;</span>

<p style="text-align: center;"><span style="font-size:24px;">Introducing.....</span><br />
<br />
<img alt="" src="/images/source/Hairshark-logocrop.png" style="width: 349px; height: 77px;" /></p>

<h2 style="text-align: center;"><span style="font-size:24px;">The worlds most advanced volumising backcombing tool.</span><br />
<br />
<img alt="" src="/images/source/HairShark/hsbrush.png" style="width: 200px; height: 179px;" /></h2>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";


Share this post

Link to post
Share on other sites

OK, so I have solved the issue but only partly. Using the code I found and edited below I get the functionality required but it alters the way in which the store appears... It is all on the left hand side and everything seems to have shrunk. Any tips or pointer on how to get it to display normally?


<meta charset="UTF-8">
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /><!-- 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 type="text/css">.modal-footer {

display: flex;

justify-content: center;


.modal-dialog {

margin: 0 auto;

padding: 0;

position: relative;

top: 40%;

transform: translateY(-40%);

<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p style="text-align: center;"><br />
<img alt="" src="/images/source/delightfullogopopup.jpg" style="width: 288px; height: 74px;" /><br />
<br />
<span style="font-size:24px;">Please register for a <strong>TRADE CARD</strong> before completing your order.</span><br />
<br />
<br />
<img alt="" src="/images/source/tradecard.gif" style="width: 700px; height: 85px;" /><br />
<br />

<div class="modal-footer"><!-- Make sure to include the 'nothanks' class on the buttons --><button aria-hidden="true" class="btn btn-default decline" data-dismiss="modal">OK</button></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.


function show_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: '/' });





Share this post

Link to post
Share on other sites

OK so it appears to be the CSS at the top of the code. Is there anyway I can stop this affecting the page as a whole? 🙄

Share this post

Link to post
Share on other sites

The div.modal-dialog contained within the div#myModal has a -40% translateY transform. That puts the modal block a bit too high (for me). Maybe the javascript moves it out of the way?

Otherwise, everything looks fine to me -- I did not allow the javascript to run. If the page is messed up (for you), focus on what the javascript is changing with respect to the CSS.

Also, I see that you are wanting to load Bootstrap's CSS and javascript package. On top of Foundation's CSS and javascript package.

Allow me to opine that doing so is an invitation for having a really bad day.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...