Copy link to clipboard
Copied
I need help getting a button to activate a modal popup. The buttton on image looks like this:
And the modal like this:
I have the button working and I have the modal popup working - But I can't figure out how to link the two - What elements in the button need to be called in the script?
This is the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
<!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
.calbtncontainer {
position: relative;
width: 100%;
max-width: 400px;
}
.calbtncontainer img {
width: 100%;
height: auto;
}
.calbtncontainer .calbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgb(47, 100, 61);
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.calbtncontainer .calbtn:hover {
background-color: black;
}
</style>
</head>
<body>
<!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
<!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB B O D Y BBBB -->
<!-- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB -->
<!-- -->
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="calbtncontainer">
<img
src="images/link_calendar.jpg"
alt="Calendar"
style="
width: 100%;
border: 1px black solid;
border-radius: 10px;
"
/>
<button class="calbtn">Check Availability</button>
</div>
</body>
</html>
And this is the modal popup (the big mess in the middle is the Google calendar link):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
<!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.modal_1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* 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_1-content {
background-color: cyan;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
/* 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;
}
.modalcontainer-16x9 {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
/* Then style the iframe to fit in the container div with full height and width */
.responsiveiframe {
position: absolute;
border: solid 1px #777;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="calBtn">Open Modal</button>
<!-- The Modal -->
<div id="calModal" class="modal_1">
<!-- Modal content -->
<div class="modal_1-content">
<span class="close">×</span>
<!-- -->
<!-- -->
<div class="modalcontainer-16x9">
<iframe
class="responsiveiframe"
src="https://calendar.google.com/calendar/embed?height=750&wkst=1&bgcolor=%23ffffff&ctz=Pacific%2FGalapagos&src=dDdua2M1NzYzZmU0OTV0cjNwY2hpcmxlcTBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=cm9kbDdxN2VoY3NtYW9sbHIyZnJzZTdiNjBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=MmdkMmxmb21nY2JiYmg5ampwcnN2N3BoN2tAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=Mm9vMjYyMmkzY2xrOGVmOWNpbjdxYTNldHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&color=%234285F4&color=%23EF6C00&color=%23B39DDB&showTitle=0"
></iframe>
</div>
<!-- -->
<!-- -->
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("calModal");
// Get the button that opens the modal
var btn = document.getElementById("calBtn");
// 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>
</body>
</html>
Maybe there is a simpler way to do the button. I could just use the image itself but the button on the image is a bit more intuitive for the user.
Should be a capital 'B' see below in red:
<button class="calbtn" id="calBtn">Check Availability</button>
When this happens a starting place is to look for errors by using your browsers dev-tools especially the web-console to check for possible javacsript errors. In this case you would have seen:
Uncaught TypeError: btn is null
So you look for that line in the javascript and check it with the id name in the code to see if it matches.
Copy link to clipboard
Copied
The modal is not working because your button currently has a 'class' name and not an 'id' name
The javascript is looking for an 'id' with the name of 'calBtn' not a 'class' with the name of 'calBtn'
Change your button name to an 'id' and see if it solves the problem or you can just add the 'id' to the button and give it the same name as the class, so you have an 'id' and a 'class' then you wont have to amend your css selector names........whichever you find easier.
Copy link to clipboard
Copied
Hi Osgood. I have tried doing as you suggest but it still does not work. I copy the combined file below - Maybe you can see where I am slipping up.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- ---------------- EXTERNAL LINK DISABLED FOR FORUM -->
<!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
/* ================= BUTTON ON IMAGE */
.calbtncontainer {
position: relative;
width: 100%;
max-width: 400px;
}
.calbtncontainer img {
width: 100%;
height: auto;
}
.calbtncontainer .calbtn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgb(47, 100, 61);
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.calbtncontainer .calbtn:hover {
background-color: black;
}
/* ================= MODAL */
.modal_1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* 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_1-content {
background-color: cyan;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
/* 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;
}
.modalcontainer-16x9 {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
/* Then style the iframe to fit in the container div with full height and width */
.responsiveiframe {
position: absolute;
border: solid 1px #777;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- -->
<!-- ================= BUTTON ON IMAGE -->
<div class="calbtncontainer">
<img
src="images/link_calendar.jpg"
alt="Calendar"
style="
width: 100%;
border: 1px black solid;
border-radius: 10px;
"
/>
<button class="calbtn" id="calbtn">Check Availability</button>
</div>
<!-- ================= MODAL WITH SCRIPT -->
<!-- The Modal -->
<div id="calModal" class="modal_1">
<!-- Modal content -->
<div class="modal_1-content">
<span class="close">×</span>
<!-- -->
<!-- -->
<div class="modalcontainer-16x9">
<iframe
class="responsiveiframe"
src="https://calendar.google.com/calendar/embed?height=750&wkst=1&bgcolor=%23ffffff&ctz=Pacific%2FGalapagos&src=dDdua2M1NzYzZmU0OTV0cjNwY2hpcmxlcTBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=cm9kbDdxN2VoY3NtYW9sbHIyZnJzZTdiNjBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=MmdkMmxmb21nY2JiYmg5ampwcnN2N3BoN2tAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=Mm9vMjYyMmkzY2xrOGVmOWNpbjdxYTNldHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&color=%234285F4&color=%23EF6C00&color=%23B39DDB&showTitle=0"
></iframe>
</div>
<!-- -->
<!-- -->
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("calModal");
// Get the button that opens the modal
var btn = document.getElementById("calBtn");
// 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>
</body>
</html>
Copy link to clipboard
Copied
Should be a capital 'B' see below in red:
<button class="calbtn" id="calBtn">Check Availability</button>
When this happens a starting place is to look for errors by using your browsers dev-tools especially the web-console to check for possible javacsript errors. In this case you would have seen:
Uncaught TypeError: btn is null
So you look for that line in the javascript and check it with the id name in the code to see if it matches.
Copy link to clipboard
Copied
Thanks Osgood. I missed that one - DUH! I'm gaining an eye for spotting capitalization and space errors in imges etc. I'll be looking out, more carefully for this one too.