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'">&times;</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";
}

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.


You could try this:

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