Javascript focuses on div when displaying warning window

Question

What I'm trying to do is create a sequence of pop-ups that will be used as a tutorial to learn about the functionality of websites. Pop-ups will appear one after another, explaining what each “div” of the website does. When the popup appears, I want the "div" link to be focused (brought to the front) so that it is more visible.

The code looks like this and obviously does not work:

var someDiv = document.getElementById('someID');
someDiv.focus();

alert("Message explaining functionality");

What am I doing wrong?

Answer 1

To make a div focusable, you should use tabindex:

<div id='someID' tabindex='1'>MY DIV TEST</div>

focus setTimeout.

. "" , alert().

, .

var someDiv = document.getElementById('someID');
someDiv.focus();

setTimeout(function(){
  alert("Message explaining functionality");
},10)

<div id='someID' tabindex='1'>MY DIV TEST</div>

Hide result

Answer 2

. - . .

$(document).ready(function() {

      // Initialize the plugin
      $('#my_popup').popup();

    });
    

<button class="my_popup_open">Tutorial</button>
<!-- Content of popup -->
<div id="my_popup">
I'm Tutorial
<button class="my_popup_close">Close</button></div>

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

  <!-- Include jQuery Popup Overlay -->
  <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>

Hide result