.small-img{
height:200px;
max-width: 250px;
border-radius: 20%;
padding: 0px;
}
.large-img, #modalImage{
max-width: 370px;
margin-top: 10px;
border-radius: 5%;
padding: 0px;
display: block;
background: rgba(0,0,0,0);
margin: 0;
}
.caption {
background-color: black;
color: white;
text-align: center;
padding: 4px;
max-width: 275px;
font-size:20px;
transform: translateY(-15px);
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed;
max-width: 400px;
z-index: 1; /* Sit on top */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden; /* Enable scroll if needed */
background: rgba(0,0,0,0); /* Black w/ no opacity */
}
.modal-content{
margin: 0;
border-style: hidden;
background: rgba(0,0,0,0); /* Black w/ no opacity */
}
.modal-header{
margin: 0;
border-style: hidden;
background: rgba(0,0,0,0); /* Black w/ no opacity */
}
<div id="myModal" class="modal" data-backdrop="false" role="dialogue"
var listOfImages = ["img_1.jpg","img_2.jpg","img_3.jpg","img_4.jpg","img_5.jpg"];
var listOfNames = ["bottomless suckpit of need", "mansplainer", "doesn't eat green vegetables", "broke artist", "another"];
var listOfModalImages = ['bigImg_0.jpg','bigImg_0.jpg','bigImg_0.jpg','bigImg_0.jpg']
var i=0;
do {
document.getElementById("image"+i).src = listOfImages[i];
document.getElementById("name-id"+i).innerHTML = listOfNames[i];
i++;
} while (i<5);
// When the user clicks, open the modal
function showtheModal(a) {
$("#myModal").modal('show');
//match image to one specified
document.getElementById("modalImage").src = a;
}
//when user clicks, close the modal
function closeTheModal(){
$("#myModal").modal('hide');
console.log("button to close clicked");
}
document.getElementById("myModal").addEventListener("click", function() {
$("#myModal").modal('hide');
});
