Jump to content

Modal on homepage needs to use cookie.


RossF1984

Recommended Posts

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>

 

Link to comment
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">
<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>

 

Link to comment
Share on other sites

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.

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...