RossF1984 Posted March 8, 2020 Share Posted March 8, 2020 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: <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">×</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 More sharing options...
Funce Posted March 11, 2020 Share Posted March 11, 2020 You might be able to use localStorage with this. Let me know if you need more assistance. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now