Modal on homepage needs to use cookie.

[RossF1984]

Hi,

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:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
<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>
</div>
</div>
<script>
// 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";
  }
}
</script>

 

[RossF1984]

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">
<title></title>
<!-- 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%);

}
</style>
<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 />
&nbsp;</p>
</div>

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

 

[RossF1984]

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? 

[bsmither]

Is there a web address we can see?

[RossF1984]

Hi!

The web address is www.delightfulonline.co.uk but the code is not on there currently due to the fact it alters the page. I want it set on the homepage as I wanted to remind/instruct a new customer to carry out a task.

It should be visible at https://delightfulonline.co.uk/html-coding-do-not-delete.html - just a hidden document I use to work on new stuff.

[bsmither]

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.

[RossF1984]

All sorted now and functioning on the index page.

Got some help from a friend which did the trick.