Simple Modal won't show on click
Question
I did have the modal working and showing when I press the button. However, now (not sure how I've done it) I cannot get the modal box to open.
I have my page laid out as an image and then the button below the image to open the modal.
This is my HTML...
<!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>
* {
box-sizing: border-box;
}
@media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
/* Fonts */
@font-face {
font-family: 'greatvibes';
src: local('greatvibes.otf');
src: url('greatvibes.otf');
format: ('opentype');
}
@font-face {
font-family: 'tenderness';
src: local('tenderness.otf');
src: url('tenderness.otf');
format: ('opentype');
}
/* Headings and Paragraphs */
h1 {
font-family: 'greatvibes';
font-size: 7vw;
font-weight: bold;
}
h2 {
font-family: 'greatvibes';
font-size: 3.5vw;
}
h3 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
}
h4 {
font-family: 'greatvibes';
font-size: 2vw;
text-align: center;
margin-bottom: 0;
}
p2 {
font-family: 'greatvibes';
font-size: 1.9vw;
}
p3 {
font-family: 'greatvibes';
font-size: 2vw;
}
p4 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p5 {
font-family: 'tenderness';
font-size: 1.5vw;
line-height: 2.5vw;
}
p6 {
font-family: 'greatvibes';
font-size: 4vw;
}
p7 {
font-family: 'greatvibes';
font-size: 4vw;
}
/* Sections */
.header {
padding: 17vw;
text-align: center;
height: auto;
background-image: url("decorhands.jpg");
background-size: 100%;
}
body {
margin: 0;
padding: 0;
background:whitesmoke;
font-family: 'tenderness';
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 20%;
background-color: #FEDCD2;
min-height: 500px;
text-align: center;
padding: 1vw;
}
.section-1 {
flex: 80%;
background-color:whitesmoke;
}
.bands {
flex: 50%;
padding: 1em;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
min-height: 10vw;
}
.socialmedia {
display: flex;
align-items: flex-end;
}
.home {
width: 100%;
height: auto;
opacity: 0.7;
}
/* Navigation bar */
.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
height: 1.2vw;
min-width: 6vw;
}
.main-nav li a:hover:after {
height: 1.2vw;
transform: scaleX(1);
}
.main-nav a:active {
border-bottom: 1vw solid whitesmoke;
}
li.products {
display: inline-block;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
/* Contact Form */
.contact-header {
margin-top: 5px;
}
.contact-header h3 {
font-size: 2.5vw;
text-align: center;
}
.contact-form {
text-align: center;
}
.form-control {
width: 80%;
background: transparent;
border: none;
outline: none;
color: black;
font-size: 1.2vw;
border-bottom: 0.2vw solid #DF744A;
margin-bottom: 1vw;
padding: 0.5vw;
}
form .submit {
background-color: #DF744A;
border-color: transparent;
color: whitesmoke;
font-size: 1.5vw;
text-align: center;
}
form .submit:hover {
background-color: rgb(209, 84, 35);
cursor: pointer;
}
/*Headband Modal*/
.modal {
display: none;
position: fixed;
z-index: 1;
padding: 10vw;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.headbands {
height: auto;
width: 30vw;
}
.previewimg {
width: 20vw;
height: auto;
margin: 1vw;
}
I am not sure why all of a sudden it wont let me open the modal.
Please help!
Thanks Mary
3 answers
solution1
1 2019-10-22 20:52:14
As I can see, in JS code you are trying to get the button in a wrong way. getElementById will not work in that case because your button does not have an id attribute
Maybe try to grab the button like so: document.querySelector(".headbutton");
Let me know if it solved the issue.
For more information about querySelector see this link and also see this link for querySelectorAll
solution2
0 2019-10-22 20:44:44
It is just for a simple reason and that is you forget to get btn in the right way. You want to get your button with getElementById but there is no element with this id in your page and that is the error part!
So you can change the class attribute to id or you can get your button with getElementByClassName in your javascript code.
I hope this helps:)
solution3
0 2019-10-22 20:45:33
You can change your btn.onclick function to a regular function such as:
function buttonClick() { modal.style.display = "block"; }
and call the onclick method in the button tag:
<button class="headbutton" onClick="buttonClick()">Preview</button>
Working jsFiddle: https://jsfiddle.net/t29qh6f3/
I did this for your span.onclick function as well.
This should make your modal appear again. Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Simple Modal Won't Show
Div won't show on click
Bootstrap Modal won't open on click
Bootstrap modal won't close on click
Bootstrap modal won't show after it is triggered
Modal won't show the image in react native
Bootstrap modal darkens screen but won't show
Modal body text won't show
Javascript modal won't close when click outside of modal
Simple Graphic won't show in the canvas
Related Tags