Javascript专注于div同时显示警报框

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.

我要做的是创建一系列警报弹出窗口,用作学习网站功能的教程。弹出窗口将陆续出现,解释网站的每个“div”。当弹出窗口出现时,我希望引用的“div”被聚焦(带到前景),以便它更加明显。

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?

我究竟做错了什么?

2 个解决方案

#1

To make a div focusable you've to use tabindex :

要使div可聚焦,您必须使用tabindex:

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

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

还尝试使用setTimeout进行一段时间的聚焦。

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

注意:我建议使用另一个“灵活”模态插件而不是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>

#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>

#1