Jump to content
Sign in to follow this  

Modal with cookie?

Recommended Posts


I have used some code for a Modal on my site. However I would like this to use a cookie so that it doesn't show every time someone comes to my page. Is this possible to do?

Apologies if this seems a silly question but I am very new to all of this....

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

You might be able to use localStorage with this.

Let me know if you need more assistance.

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.

Sign in to follow this  

  • Create New...