We Keep Coding

How do I make me popup display on all of buttons with minimal Javascript

What I want
I have a page that you use to shop for cards and I do not want to create like 100 pages for different products so I just want a popup for each tile. But when I assign my id to javascript then I create another rid and just put a comma then that id name after there is no response.
My question is
How do I apply the same javascript to different buttons with the same effect But with different content with minimum code?
My code so far
// Get the modal
var modal = document.getElementById("myModalz");
// Get the button that opens the modal
var btn = document.getElementById("myBtnz");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closez")[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";
}
}
#import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght#400;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.card {
margin: 0.5%;
display: inline-block;
position: relative;
width: 320px;
height: 480px;
background: #191919;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ffce00;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
.card .imgBox img {
max-width: 100%;
transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;
}
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #000000;
text-decoration: none;
background-color: #ffce00;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
/* The Modal (background) */
.modalz {
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 */
.modalz-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.closez {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closez:hover,
.closez:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!--zero-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse">
</div>
<div class="contentBox">
<h3>Backrooms Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!--one-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse">
</div>
<div class="contentBox">
<h3>War Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

document.getElementsByClassName("buy") will return a collection of the anchor tags with the class 'buy' that you can then loop over and apply the binding to that event.
Alternatively you could use a <button> tag and then loop over document.getElementsByTagName('button').
So
const elements = document.getElementsByClassName("buy");
[...elements].forEach((element) => {
element.onclick = function(event) {
// Now you've got the event you can use it's target, parent or siblings
// to get some content from the wrapping element, something like this
// (you may need to change this but start with event.target)
const content = event.target.parent.innerHTML();
// Set that content on the modal
const modalContentElement = document.querySelector(".modalz-content p");
modalContentElement.innerHTML(content);
// Then open the modal!
modal.style.display = "block";
}
}

Modal image close preview from w3schools.com not working

Heres the link to the w3 page https://www.w3schools.com/howto/howto_css_modal_images.asp, and all the changes made is only in the javascript. Note that the one in the w3 page isnt working so i had to find a solution from this page and found this https://jsfiddle.net/snowMonkey/f1zav0ge/ and i took only the javascript code from here, and both still doesnt work
Heres the html:
<html>
<head>
<title>Gallery | safsafa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="gallery.css">
<link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUXLH90QAaWzieHLTW9BxxNvSKIEhAzRzJ1g&usqp=CAU" type = "image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<header>
<h1><span><i class="fa fa-trophy" aria-hidden="true"></i> fsasaf</span></h1>
<ul class="nav_links">
<li>Gallery</li><li>Showcase</li><li>About</li><li class="nav-seperator">|</li>
</ul>
</header>
<main>
<div class="container">
<h2>//CLICK THESE IMAGES</h2><br>
<img class="myImages" id="myImg" src="image/racoon.jpg" alt="A Racoon" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/hamster.jpg" alt="A Hamster" style="width:100%;max-width:300px">
<img class="myImages"id="myImg" src="image/hedgehog.jpg" alt="A Hedgehog" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/artic_fox.jpg" alt="An Artic Fox" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
</main>
<script>
window.addEventListener('scroll',function(){
var header = document.querySelector("header");
header.classList.toggle('sticky',window.scrollY > 0)
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="aos.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
And heres the css:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#500&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: #9dc1fc;
}
header{
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
background-color:;
transition: 0.6s;
z-index:10000000;
}
header span{
font-family:Poppins, sans-serif;
cursor: pointer;
font-size: 125%;
font-weight: 900;
padding-left: 70px;
}
header .nav-seperator{
color: black;
cursor: pointer;
}
header span{
letter-spacing:-2px;
font-size: 115%;
color: blackc;
}
header ul{
font-family:Heebo, sans-serif;
font-weight: 6200;
font-size: 100%;
list-style-type: none;
padding-right: 100px;
}
header li{
display: inline-block;
}
header li a{
margin-right:30px;
text-decoration: none;
color: black;
transition: all 0.3s ease 0s;
}
header li a:hover{
color: #fe6e00;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
header.sticky{
background-color:rgba(0,0,0,0.5)
}
header.sticky ul li a{
color: white;
}
header.sticky span{
color: white;
}
header.sticky .nav-seperator{
color: white;
}
/* MAIN CONTAINER*/
main .container{
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
text-align:center;
text-transform:uppercase;
color:black;
font-family: Poppins;
font-size: 2rem;
font-weight: 900;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
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.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

Currently, the close button on the modal window remains below the navigation and therefore cannot be clicked. In order to be able to close the modal it is necessary to make these two changes in CSS:
On style header set z-index: 10;
On style .modal set z-index: 11;
This change he made so that when the modal window opens it will stand above the navigation and the "close" button can be clicked.

How do I make a modal out of this form?

I have developed a form and I want it to be hidden and when a user presses a button, it opens up. I am using html/css and js. I have built it on a separate folder and want to add it to an existing one. I want the form to be above the rest of the other page.
So you can get a glance at what I am doing, here is a video of my form, https://www.youtube.com/watch?v=mUdo6w87rh4&ab_channel=TraversyMedia
Now I want that form to start hidden and open on a button click.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>MMT University</h1>
<span>Se registre para começar</span>
<input type="text" placeholder="Usuário" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
<input type="password" placeholder="Repita a sua senha" />
<button>Registrar</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Acessar</h1>
<span>Acesse a MMT University</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Senha" />
Esqueceu a senha?
<button>Acessar</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Bem vindo!</h1>
<p>Para continuar aprendendo, acesse a sua conta!</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>MMT University!</h1>
<p>Se registre para entrar na melhor universidade trading do mundo.</p>
<button class="ghost" id="signUp">Registre-se</button>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>
<button href="#ex1" rel="modal:open" id="myBtn">Acessar</button>
</body>
Here is my css:
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: -20px 0 50px;
}
h1 {
font-weight: bold;
margin: 0;
margin-bottom: 5vh;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid rgb(220,52,52);
background-color: rgb(220,52,52);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
color: #fff;
background-color: rgb(220,52,52);
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
overflow: auto;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.close {
/* Position it in the top right corner outside of the modal */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #05031b;
background: -webkit-linear-gradient(to right, #05031b, #05031b);
background: linear-gradient(to right, #05031b, #05031b);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
Here is a file I copied from the internet and kind of managed my buttons in order to follow those ids.
(the file's name is modal.js, that is the script I imported there.) (the main.js is an animation for the form)
Javascript file modal.js
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 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";
}
}

A couple of things you should note:
In your HTML, you load modal.js before you define myBtn:
...
</div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script> <--- Loading modal.js
<button href="#ex1" rel="modal:open" id="myBtn">Acessar</button> <--- defining myBtn
So when modal.js runs, the first thing it does is it looks for myBtn,
var modal = document.getElementById("myModal");
...which doesn't exist yet.
So, you should probably load modal.js either in the head (between the <head> tags) of the document or at the end to avoid these problems.
After you've added the id myModal to the container, the modal probably will load without clicking the button. That's because it was never hidden. You need to hide it either via JS or CSS. Here's an example with JS (you just set the display to none):
// Get the modal
var modal = document.getElementById("myModal");
modal.style.display = "none";
Now it shouldn't show until you click the button. But to hide it when you click outside, you need to check if the place where you clicked was not (1) the modal, and (2) in the modal. This is relatively easy:
window.onclick = function (event) {
if (modal !== event.target && !modal.contains(event.target)) { // Evaluates to true if the modal is not the clicked element and the
modal.style.display = "none"; // modal does not contain the clicked element
btn.style.display = 'block'
}
}
But this is what you currently have:
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
This is checking if the clicked element is the modal, then closing it if that is the case. That's not what you want, so use the previous example instead
--
You can also add the code for opening the modal into this listener, simplifying the whole code (full code of modal.js):
// Get the modal
var modal = document.getElementById("myModal");
modal.style.display = "none";
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Handle clicks
window.onclick = function (event) {
if(event.target.id == "myBtn") { // If the button is clicked, open the modal and hide the "open the modal" button
modal.style.display = "block";
btn.style.display = 'none'
}
else if (modal !== event.target && !modal.contains(event.target)) { // If the click is outside the modal, hide the modal and show the "open the modal" button
modal.style.display = "none";
btn.style.display = 'block'
}
}
Full example online
Let me know if there are any problems you encounter with this solution.

Cannot close modal box via close button or by clicking outside modal box

I am very new to javascript and I am trying to use modal boxes for profile information. The website that I am building this on does happen to be a drag and drop interface.
I have gotten it to open all of my modals but it wont always close all of my modals. Please note that the below code is contained within the html area of a drag and drop website. Thus far I have avoided using global java although I am open to that. I just don't want to screw it up. All advice welcome.
Here is my code:
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #ffffff;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #333192;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px; }
a {
text-decoration: none;
font-size: 22px;
color: black; }
button:hover, a:hover {
background-color: #1b1464; }
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 12px;
/* 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 {
position: relative;
background-color: #FFFFFF;
margin: auto;
padding: 0px;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s }
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0} to {top:0; opacity:1} }
#keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} }
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold; }
.close:hover, .close:focus; cursor: pointer; {
color: #000;
text-decoration: none;}
.modal-header {
padding: 12px;
background-color: #333192;
color: F15C22; }
.modal-body {
padding: 12px;}
.modal-footer {
padding: 12px;
background-color: #F15C22;
color: white; }
.container {
position: relative;
width: 100%; }
a:link {
color: #ffffff; }
.image {
position: relative;
width: 100%;
height: auto; }
.image:hover { opacity: .7; }
</style>
<div class="card">
<a id="patricoloBtn"><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" class="image" style="width:100%"></a>
<h2 class="contStyleHeaderSubtitle" style="font-weight: 300;"><font face="Helvetica">Francesca Patricolo</font></h2>
<p class="title" style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">Transportation Planner</p>
<p style="font-family: Arial, Helvetica, sans-serif;"><strong>Portland, Oregon</strong></p>
<div style="font-family: Arial, Helvetica, sans-serif; font-weight: 300; margin: 24px 0px;">
<img src="/resources/Pictures/Site%20Icons/linkedin.png" class="card" alt="Linkedin" title="Linkedin" border="0" width="40" height="40" align="center">
</div>
<p style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">
Contact
<div class="container">
<div id="patricoloModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3 style="color:#F15C22">Francesca Patricolo</h3>
</div>
<div class="modal-body">
<p><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" style="max-width: 210px; margin: 10px; border-radius: 50%;" align="left"><strong>What field do you work in?</strong></p>
<p>Transportation Planning</p>
<p><strong>What kinds of work do you do?</strong></p>
<p>Long range planning, public policy, regional coordination</p>
<p><strong>How many years have you been doing this work?</strong></p>
<p>10</p>
<p><strong>What's your favorite Core Value and why?</strong></p>
<p>#7: Public participation communicates to participants how their input affected the decision. -A KEY trust-builder! It's not done until we communicate back.</p>
<p><button><font color="#FFFFFF">Contact</font></button></p>
</div>
<div class="modal-footer"></div>
</div>
<script type="text/javascript">
/*** Get the modal***/ var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/ var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/ var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
patricoloBtn.onclick = function() { patricoloModal.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 == patricoloModal) { patricoloModal.style.display = "none"; } }
</script>

Remove Javascript for displaying the Modal, this is not the proper way.
Replace this
<a id="patricoloBtn"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
with
<a data-toggle="modal" data-target="#patricoloModal"><img src="path" alt="Francesca" class="image" style="width:100%"></a>

For adding event listeners to multiple elements you must do the following:
var span = document.getElementsByClassName("close");
span.forEach(span => span.addEventListener("click", closeModal);
So heres the code:
/*** Get the modal***/
var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/
var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/
var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
span.forEach(span => span.addEventListener("click", closeModal));
/*** When the user clicks on <span> (x), close the modal ***/
function closeModal() {
particoloModal.style.display = "none";
}
/*** When the user clicks anywhere outside of the modal, close it***/
document.body.addEventListener("click", (event)=>{
// IF THE CLICKED TARGET IS NOT EQUAL TO THE PARTICOLO MODEL
if(event.target !== particoloModal) {
particoloModal.style.display = "none";
}
})
Hope this works for you.

Bring modal to front

Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</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 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";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>

Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
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 */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css