Javascript focus on div while showing alert box

Question

What I am trying to do is create a sequence of alert pop-ups that will be used as a tutorial for learning a websites' functionalities. The pop-ups will appear one after another explaining what each "div" of the website does. When a pop-up appears I want the referenced "div" to be focused ( brought to foreground ) so that it would be more visible.

The code looks like this and obviously it 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've to use tabindex :

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

Also try to give it a while to focus using setTimeout.

NOTE : I suggest really the use of another "flexible" modal plugin than the alert().

Hope this helps.

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

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

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

Answer 2

You could try with this to make your tutorial. I already made once something similar. Check project here.

$(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>