Autofokus auf Modal View

Was ich erreichen möchte, ist Autofokus auf die Modalansicht. Um es ein bisschen weiter zu erklären. Ich möchte es so, dass, wenn ich auf mein Bild auf meiner Webseite klicke und es die modale Ansicht öffnet, sollte es sich automatisch auf das Modal konzentrieren, das mir erlaubt, nach oben und unten zu scrollen, ohne dass ich auf das Bild klicken muss, um es zu fokussieren in der Lage sein, mit meiner Tastatur auf und ab zu blättern.Autofokus auf Modal View

Follow-up I Links oben auf Bilder gab. Hoffentlich ist es jetzt einfacher. Prost

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"; 
}

Quelle

2017-01-02 Haroon Ramay

Das autofocus Attribut wird in diesem Fall nicht funktionieren, da diese beim Laden der Seite ausgelöst. Sie können dieses Problem jedoch mit ein wenig JavaScript lösen.

document.getElementById('modal').focus(); // vanilla JS 
$('#modal').focus(); // jQuery

Stellen Sie sicher, dass eine dieser Funktionen ausgelöst wird, sobald das Modal geöffnet wird.

Quelle

2017-01-02 08:41:06 JasonK

habe ich versucht, sowohl Vanille JS und JQuery. Ich habe versucht, die Vanilla JS in der Funktion img1.onclick auszulösen, nachdem das Modal mit modal.display = block angezeigt wurde. Mit JQuery habe ich versucht, das Gleiche zu tun. Ich habe die Alarmfunktion verwendet, um sicherzustellen, dass meine Auslöser funktionieren. Hat aber nicht funktioniert. Ich werde es weiter versuchen, ich habe das Gefühl, ich mache etwas Dummes, daher funktioniert es nicht so, wie ich es wollte. –

Sie konnten dieses versuchen:

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

Quelle

2017-01-02 08:46:11

Könnten Sie bitte sagen, wofür das 'showed.bs.modal' ist? Ich nahm an, dass die 'showed.bs.modal' wäre, wenn das Modal angezeigt oder geöffnet wird. Ich habe versucht, Ihre Funktion zu verwenden, aber ich habe kein positives Ergebnis erhalten. –

Entschuldigung, ich dachte, Sie verwenden Bootstrap-Modal (Ich habe '# myModal' gesehen und nehme an, dass es ein Bootstrap-Standard war). Das gilt nicht für das, was du tust. Haben Sie versucht, den Fokus auf eines der Elemente im Modal zu legen? –

Oh, ich werde das Bootstrap-Modal nachschlagen und sehen, ob das funktioniert. B/c Ich benutze Bootstrap. Auch werde ich versuchen, eine Art von Element in das Modal zu konzentrieren. –

Autofokus auf Modal View

Antwort

Verwandte Themen