Is there a way to move the focus to a modal when the modal is opened without the tabindex = -1 attribute?

Viewed 543

I know that the focus shifts to modal due to the tabindex=-1 property when the modal opens.

Is there a way to move the focus to a modal when the modal is opened without the tabindex=-1 attribute?

2 Answers

Indeed there is, which is also the correct way using JavaScript focus the Close button of the modal. Here is one example to elaborate.

<div class='modal' aria-describedby='modalDescription'>
  <a href="#" class="close" title="close button">X</a>
  <div class='modal-content'>
    <p class='text' >
    This is a dialog window which 
    </p>
    <button type="submit" aria-label="Know More">Know More</button>
    <a href="#" class="redirect-close"></a>
  </div>
</div>

Now using jquery or native javaScript on model open first focus the close button next tabbing will keep the focus on model focus-able elements in DOM until .redirect-close link is reached then it will move the focus back to the close button with class .close

Indeed, there is: You just need to focus on the first focusable element in the dialog via JS when the popup is open.

Here's the JS fiddle for more info:https://jsfiddle.net/Moubin_Shiraz/wpq5g8ah/12/
Related