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>