We Keep Coding

How make a modal transition?

I'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works...
The modal have to be open from the center of the screen or from the screen down side.
I found this code from google :
https://codepen.io/designcouch/pen/obvKxm
But it's really too complicated for me. I can't understand how adapt it with my code...
/*Ouvrir le popup stress */
// Get the modal
var hydricstressmodal = document.getElementById('hydricstressmodal');
// Get the button that opens the modal
var stress = document.getElementById("stress");
// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];
// When the user clicks the button, open the modal
stress.onclick = function() {
hydricstressmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
hydricstressmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == hydricstressmodal) {
hydricstressmodal.style.display = "none";
}
}
/*Ouvrir le popup vegetal */
// Get the modal
var vegetalmodal = document.getElementById('vegetalmodal');
// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");
// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
// When the user clicks the button, open the modal
vegetal.onclick = function() {
vegetalmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
vegetalmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vegetalmodal) {
vegetalmodal.style.display = "none";
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin : auto;
}
/*popup hydric stress*/
.hydricstressmodal {
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.7); /* Black w/ opacity */
}
/* stress Modal Content */
.stress-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popstress img{
width: 20%;
}
/* The Close Button */
.stressclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.stressclose:hover,
.stressclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*popup Vegetal*/
.vegetalmodal {
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.8); /* Black w/ opacity */
scale
}
/* stress Modal Content */
.vegetal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popvegetal img{
width: 40%;
}
/* The Close Button */
.vegetalclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.vegetalclose:hover,
.vegetalclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="content">
<h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>
<div id="file" action="" class = "container">
<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
<div class = "text">
Stress hydrique
</div>
</div>
<!-- The hydric stress Modal -->
<div id="hydricstressmodal" class="hydricstressmodal">
<div class="stress-content">
<span class="stressclose">×</span>
<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
<div class = "text">
Biophotonique appliquée aux végétaux
</div>
</div>
</div>
<!-- The vegetal Modal -->
<div id="vegetalmodal" class="vegetalmodal">
<div class="vegetal-content">
<span class="vegetalclose">×</span>
<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<img src="IMAGES/PNG/pont.png" width="100%" />
<div class = "text">
Etudes des ponts photoniques
</div>
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/button.js"></script>

A simple solution with css animations:
$('#open').click(function() {
$('#modalOverlay').show().addClass('modal-open');
});
$('#close').click(function() {
var elem = $('#modalOverlay');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
#modalOverlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
}
#modal {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
text-align:center;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 150ms ease-in-out;
}
#modalOverlay.modal-open #modal {
opacity:1;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
<div id="modal">
<h1>My modal</h1>
<p>This is a simple modal</p>
<button id="close" type="button">Close</button>
</div>
</div>

If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.

You can also use library like bootstrap. For bootstrap modal you can refer below link.
https://getbootstrap.com/docs/4.0/components/modal/

switching getElementById to ClassName for creating popup does not work

I'm probably going to get spanked for asking this but all the posts on this site are too technical for my meager knowledge of js. I found code to create a popup of an image that I like, but since it uses getElementById it only works for the first image. I tried switching to getElementsByClassName and made the global changes in the css and html using . not # etc., but this doesn't permit the additional images to pop up. I did consult other posts on this site such as "How to switch a getElementById to getElementsByClassName" which was not clarifying for me since the answer advises to make a switch to code using getElementsByClassName even though the post's title references switching from getElementById. Other posts were opaque as to how to update or edit the js to get what I need. I appreciate any guidance.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script src="https://use.typekit.net/qkv6kzb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<meta charset="UTF-8">
<title>Barton's website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.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 */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#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%;
}
}
.gallery {
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background-color: ;
border: 2px black solid;
}
.photo {
border: 20px red solid;
padding: 20px;
}
.photo img {
padding: 50px;
padding-bottom: 25px;
}
</style>
</head>
<body>
<section class="gallery">
<table class="photo" width= height=>
<tr>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-109.jpg" alt="262-109, 67th Ave., Queens Boulevard Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_262-197.jpg" alt="262-197, 67th Ave., Queens Boulevard Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
<td><img id="myImg" class="photobox" src="http://www.bartonlewisfilm.com/img_287-153.jpg" alt="287-153, Flushing Ave., IND Crosstown Line" width="256" height="171" />
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div></td>
</tr>
</table>
</section>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>

This code also will solve your problem,
var modal = document.getElementById('myModal');
var imageArray = document.getElementsByClassName("photobox");
for(var i=0;i<imageArray.length;i++){
var img = imageArray[i];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
You don't need to have multiple modal html codes, only one following content is enough,
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Using only JavaScript:
var images = document.getElementsByClassName("photobox");
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var clickFn = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
};
for (var i = 0; i < images.length; i++) {
images[i].onclick = clickFn;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
Using jQuery:
$("img.photobox").click(function() {
$("#myModal").show();
$("#img01").attr( src, this.src );
$("#caption").html(this.alt);
});
$("span.close").click(function() {
$("#myModal").hide();
});

Modal box works for one element but not for others

I've created a modal box which works fine, but when I apply that to other elements it just works on the first one.
These elements are different images that when you click open a modal box with different information in each one
This is the url
It will really appreciate if you anyone can help me out with this.
Thanks,
This is the HTML:
<div id="myBtn">
<div class="container-team">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-normal.jpg" class="image-person">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-hover.jpg" class="overlay-person">
<div class="centered">Jack Denton</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<aside>
<div class="photo-person-modal-box">
<img src="https://i.stack.imgur.com/7UL6j.jpg">
</div>
<div class="connect-modal-box">
<div class="social-icon-modal-box">
<div class="container-social-icon">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
</div>
</div>
</aside>
<div class="description-modal-box">
<header class="header-modal-box">
<div class="name-modal-box">
<strong>JACK DENTON</strong>
</div>
<div class="role-modal-box"> CO-FOUNDER</div>
</header>
<div class="content-modal-box">
<div class="quote-modal-box">The big dog, the raconteur, the linguaphile.
</div>
<div class="question-modal-box">Worst job after graduating?</div>
<div class="text-modal-box">Working on a chicken farm. Have you seen Napoleon Dynamite? It’s like that but worse. Dead chickens in bins a metre from where I was working, stifling heat and constant attacks from angry cockerels. It was alright, though, because they were paying me £3 an hour.
</div>
</div>
</div>
</div>
</div>
This is the JavaScript:
<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 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";
}
}
</script>
This is the CSS:
/*__________________MODALBOX__________*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 4; /* Sit on top */
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(3,134,221,0.30); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
width: 70%; /* Could be more or less, depending on screen size */
height: 28.75rem;
}
/* The Close Button */
.close {
color: #ffffff;
float: right;
font-size: 50px;
font-weight: bold;
height: 60px;
width: 60px;
position: relative;
background-color: #019ee3;
border-radius: 50%;
box-shadow: rgba(35,35,35,0.2) -1px 1px 8px ;
padding: 15px 15px;
text-decoration: none;
margin: -20px -20px 20px;
transition: all 1s ease-in-out 0s;
}
.close:hover, .close:focus {
text-decoration: none;
cursor: pointer;
transform: rotate(360deg);
transition: all 1s ease-in-out 0s;
}

I think you need to use myBtn like a Class
<div class="myBtn">
...

Adjusting JQuery Code for Image Modals linked to Text

I have a current modal set-up that uses a jquery script to allow for multiple modals on a single page. Currently, the user selects an image, and that same image pops-up as a modal (event.target). In this instance, I would like users to be able to select a string of text, which pops-up an associated image. I am having difficulty modifying my code to do so. For the sake of clarity, I have placed both instances in a single jsfiddle. Any help would be much appreciated.
https://jsfiddle.net/csapidus/mh3hysrr/12/
The same code that is in the jsfiddle is below:
<title>[BMED] Acrylic Breakdancing Contraption</title>
<link rel="icon" href="https://c1.staticflickr.com/5/4304/35858762401_3288711c9e_o.png">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: ;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.55%;
margin-bottom: 10px;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/******************** Image Modals ********************/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 1.0;}
/* 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 */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#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%;
}
}
</style>
<body>
<div class="footerU">
<h1>[BMED] Acrylic Breakdancing Contraption</h1>
</div>
<div class="intro_unlim">
<p> The **** final project required students to develop a contraption with at least three connected moving parts. I elected to model a breakdancer's legs as he prepares for a headspin. Unfortunately, the final product came out looking like more of an upside down crab. The legs are made of thin acrylic, the wood for the base is walnut, and the wood for the body is paduak. </p>
<p> Estimated Building Cost: $35.00</p>
<br>
<p> Clicking this text should open up a modal that presents the first image</p>
<p> Clicking this text should open up a modal that presents the second image</p>
</div>
<div class="full">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img id="Img1" class = "modal-img" data-index = "1" src="https://c1.staticflickr.com/5/4352/36316868716_a33d16e02e_b.jpg"/>
</div>
<div id="myModal1" class="modal" data-index="1">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption">paduak body of the contraption (cut using a jigsaw, and then sanded) nailed to rectangular walnut base</div>
</div>
<div class="grid-item">
<img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/3/2945/33377180683_9c7b27232f_b.jpg"/>
</div>
<div id="myModal2" class="modal" data-index="2">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption">final product: paduak contraption with acrylic legs, a walnut base, and googley eyes</div>
</div>
</div>
</div>
<div class="return">
<div id="button">Return to Homepage</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4.2.0/dist/masonry.pkgd.min.js"></script>
<script>
// JQuery Method for Multiple Modals
$(function() {
$('body').on('click', '.modal-img', function(event) {
var $img = $(event.target);
var index = $img.data('index');
var $modal = $("#myModal" + index);
$modal.find('img').attr('src', $img.attr('src'));
$modal.find('#caption').text($img.attr('alt'));
$modal.css('display', 'block');
});
$('body').on('click', '.modal .close', function(event) {
var $modal = $(event.target).closest('.modal');
$modal.css('display', 'none');
});
});
// JQuery Method for Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer',
gutter: 10
});
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
</script>
</html>

`See this jsfiddle link that I have created for you: `
https://jsfiddle.net/beljems/ubvvesrw/
I am using $(this), I hope this will help you :)

Auto focus on Modal View

What I want to accomplish is auto focus on the modal view. To explain it a bit further. I want it so that when I click on my image on my web page and it opens up the modal view it should automatically focus on the modal allowing me to scroll up and down without me having to click on the image to bring it on focus to be able to scroll up and down using my keyboard.
http://imgur.com/a/hG0CF
http://imgur.com/a/W9Erw
http://imgur.com/a/Ijcn5
Follow up I gave links above to pictures. Hopefully its easier now. Cheers
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Advise Column
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Modal.css">
<link href="https://fonts.googleapis.com/css?family=Quattrocento|Risque|Unkempt" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h1 id="top-hd-01" class="page-header">PICK A SENSEI!</h1></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Batman.jpg" alt="BATMAN" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-01">
<figcaption class="img-captioning">BATMAN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Robin.jpg" alt="ROBINS" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-02">
<figcaption class="img-captioning">ROBIN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Joker.jpg" alt="JOKER" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-03">
<figcaption class="img-captioning">JOKER</figcaption>
</figure>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<!-- The Close Button -->
<span class="close" id="modal-cross-button" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modal-adv-page-img">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script src="Modal.js" type="text/javascript"></script>
</body>
</html>
CSS
#top-hd-01
{
font-family: 'Unkempt', cursive;
}
.img-placement
{
display: block;
text-align: center;
/*cursor: pointer;*/
}
.advise-page-img-sizing
{
height: 250px;
width: 350px;
}
.img-captioning
{
font-size: 35px;
font-family: 'Risque', cursive;
text-align: center;
margin-top: 10px;
}
/* Style the Image Used to Trigger the Modal */
.adv-page-img-modalling {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.adv-page-img-modalling: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%;
padding: 20px;
/*height: 100%;*/
/* max-height: 450px;
max-width: 700px;*/
}
#modal-cross-button
{
position: fixed;
}
.sensei-answers, .sensei-questions, .sensei-quote
{
font-family: 'Quattrocento', serif;
}
.sensei-questions
{
font-size: 28px;
}
.sensei-answers
{
font-size: 22px;
color: darkblue;
}
.sensei-quote
{
font-size: 20px;
text-align: center;
color: #ff751b;
}
/* 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 {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#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%;
}
}
JavaScript
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("modal-adv-page-img");
var img1 = document.getElementById("adv-page-img-01")
var img2 = document.getElementById("adv-page-img-02")
var img3 = document.getElementById("adv-page-img-03")
var captionText = document.getElementById("caption");
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img3.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

You could try this:
$("#myModal").on('shown.bs.modal', function () {
$(this).focus();
});

The autofocus attribute won't work in this case, since this will fire on page load. However, you can easily tackle this problem with some JavaScript.
document.getElementById('modal').focus(); // vanilla JS
$('#modal').focus(); // jQuery
Make sure to trigger one of these functions as soon as the modal is openend.