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:hover,.close:focus {
color:#000;
text-decoration: none;
cursor: pointer;}</style><h2><!--TheModal--></h2><div class="modal" id="myModal"><!--Modal content --><div class="modal-content"><span class="close">×</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 modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar 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>
Modal with cookie?
in JavaScript
Posted
Hi,
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: