Question

我要做的是创建一系列警报弹出窗口，这些弹出窗口将用作学习网站的教程。功能。弹出窗口将一个接一个地出现，解释每个＆＃34; div＆＃34;该网站的确如此。当弹出窗口出现时，我想要引用的＆＃34; div＆＃34;聚焦（带到前景），以便更加明显。

代码看起来像这样，显然它不起作用：

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

alert("Message explaining functionality");

我做错了什么？

Answer 1

要使div成为焦点，您可以使用tabindex：

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

还尝试使用focus给setTimeout一段时间。

注意：我建议使用另一个＆＃34;灵活的＆＃34;模态插件而不是alert()。

希望这有帮助。

＆＃13;

var someDiv = document.getElementById('someID');
someDiv.focus();

setTimeout(function(){
  alert("Message explaining functionality");
},10)

＆＃13;

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

＆＃13;

Answer 2

您可以尝试使用它来制作教程。我曾经做过类似的事情。 Check project here

＆＃13;

$(document).ready(function() {

      // Initialize the plugin
      $('#my_popup').popup();

    });

＆＃13;

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

＆＃13;

Javascript专注于div，同时显示警告框

2 个答案: