html - Javascript focus on div while showing alert box - Stack Overflow

admin管理员组

文章数量:1427307

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?

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?

• javascript
• html
• css
• alert

Share Improve this question Follow edited Mar 17, 2017 at 21:05 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Mar 17, 2017 at 20:14 kplatiskplatis 7166 bronze badges 3

• 1 How can alert() and div have focus at the same time? You can call alert() with message, then call focus on element when alert() is closed. – guest271314 Commented Mar 17, 2017 at 20:17
• 1 An alert is the wrong mechanism if yiu want shared focus. All major browser implementations it blocks interaction from the site, besides it looks terrible. You'd be better implementing your own notification box which you position next to each element your giving info on. . – ste2425 Commented Mar 17, 2017 at 20:23
• 1 No one likes alerts. – Mikey Commented Mar 17, 2017 at 21:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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>

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./jquery-1.8.2.min.js"></script>

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

本文标签： htmlJavascript focus on div while showing alert boxStack Overflow