another tra focus with better find selectors

Modal

by ian_smithz

HTML

<button class="modal__show">Show Modal</button>

<div class="parent">


<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelled-by="modaltitle">
  <div class="modal__content">
    <h2 id="modal_title" tabindex="-1">Modal window</h2>
    <p>Pancetta porchetta beef, drumstick shank turducken filet mignon cupim pig sirloin landjaeger frankfurter pork. Meatball chuck pastrami biltong venison jowl burgdoggen rump swine bresaola tri-tip. Hamburger shank bacon, doner prosciutto pork chop spare ribs meatball kevin pork belly. </p>
    
    <button class="modal__close">
      close
    </button> <!-- .modal__close -->
  </div> <!-- .modal__content -->
</div> <!-- .modal -->


</div>


<script>
jQuery(function() {

$('#modal').insertBefore($('#modal').parent());

    if ( window.location.hash.indexOf('de') > -1 ) {
        console.log('bangers');
    }
});

</script>

CSS

.modal {
  background-color: rgba(0,0,0,0.5);
  height: 100vh;
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.modal--visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__content {
  background-color: rgb(255, 255, 255);
    height: 70%;
  width: 70%;
  padding: 2rem;
  position: relative;
}

.modal__close {
  background-color: #000000;
    position: absolute;
  right: -1rem;
  top: -1rem;
    color: #ffffff;
}

:focus {
  outline: 4px solid #FF0000;
}

JavaScript

// Button to trigger the modal window
var button = document.querySelector('.modal__show');
// Variable for storing the last focused element
var lastFocusedElement;
// Close button in modal window
var closeButton = document.querySelector('.modal__close')

// Open modal window on click
button.addEventListener('click', showModal);


// Show Mmdal
function showModal() {
  // Close all open modal windows
  removeModal();
  // Store the last focused element
  lastFocusedElement = document.activeElement;
  // Select the modal window
  var modal = document.getElementById('modal');
  // Show the window
  modal.classList.add('modal--visible');
  // Find all focusable children
  var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [tabindex="-1"], [contenteditable]';
  var focusableElements = modal.querySelectorAll(focusableElementsString);
  // Convert NodeList to Array
  focusableElements = Array.prototype.slice.call(focusableElements);

  // The first focusable element within the modal window
  var firstTabStop = focusableElements[0];
  // The last focusable element within the modal window
  var lastTabStop = focusableElements[focusableElements.length - 1];
  // Focus the window
  firstTabStop.focus();
  // Add keydown event
  modal.addEventListener('keydown', function(e) {
    // Listen for the Tab key
    if (e.keyCode === 9) {
      // If Shift + Tab
      if (e.shiftKey) {
        // If the current element in focus is the first focusable element within the modal window...
        if (document.activeElement === firstTabStop) {
          e.preventDefault();
          // ...jump to the last focusable element
          lastTabStop.focus();
        }
      // if Tab
      } else {
        // If the current element in focus is the last focusable element within the modal window...
        if (document.activeElement === lastTabStop) {
       ...