I'm facing an issue with the modal on my website. Initially, it was working fine and showing up when I clicked the button. But now, for some reason (which I can't figure out), the modal box refuses to open.
The layout of my page consists of an image and a button below the image, which should trigger the modal.
This is the HTML code I have...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://kit.fontawesome.com/454c24fdd9.js"></script>
<title>Elle and Belle Design</title>
</head>
<body>
<div class="logo">
<a href="home.html.jpg"><img src="logo.png" class="logoimg"></a>
</div>
<nav class="main-nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="info.html">Information</a></li>
<li class="products">
<a href="products.html" class="dropdown">Products</a>
<div class="dropdown-content">
<a href="headbands.html">Headbands</a>
<a href="earrings.html">Earrings</a>
<a href="Other.html">Other</a>
</div></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<div class="header">
<h1>Elle and Belle Design</h1>
<h2>Bespoke Handmade Headbands and Accessories</h2>
</div>
</div>
<div class="mainbody">
<div class="sidebar">
<h3>Updates</h3>
</div>
<div class="section-1">
<img src="silverband.jpg" class="previewimg"><br>
<button class="headbutton">Preview</button>
<div id="headmodal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p7>Belle Band</p7><br>
<img src="silverband.jpg" class="headbands">
<img src="silverbandon.jpg" class="headbands">
<p6>£15</p6><br>
<p4>Our Belle Band is hand-crafted with love and care in both thick and thin sizes.</p4><br>
<p4>We use a range of small silver jewels incorporated with white pearls and flowers for that ultimate wedding look</p4>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("headmodal");
// Get the button that opens the modal
var btn = document.getElementById("headbutton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// 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>
</div>
</div>
<div class="footer">
<div id="socialmedia">
<i class="fab fa-facebook-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-instagram fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
<i class="fab fa-twitter-square fa-2x"><a style="padding-left: 15px;" href='#'></a></i>
</div>
<br>
<p3>Find Us on Social Media</p>
</div>
</body>
</html>
I seem to be stuck with the modal not functioning as expected suddenly.
Seeking assistance! Thanks.
Best regards, Mary