JavaScript專注於div，同時顯示警示框

我想要做的是創建一系列警報彈出窗口，將用作學習網站功能的教程。彈出窗口會一個接一個地顯示網站每個「div」的功能。當出現彈出窗口時，我希望引用的「div」被聚焦（帶到前臺），以便它更加明顯。JavaScript專注於div，同時顯示警示框

的代碼看起來是這樣的，顯然這是行不通的：

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

alert("Message explaining functionality");

我在做什麼錯？

來源

2017-03-17 platico

如何'警報（）'和'div'在同一時間'focus'？你可以用alert調用alert（），然後在alert（）關閉時調用'focus'。 – guest271314

如果yiu想要共享焦點，警報是錯誤的機制。所有主要的瀏覽器實現都會阻止網站的交互，除此之外它看起來很糟糕。你會更好地實現自己的通知框，您可以在每個元素旁邊放置您提供的信息。。 – ste2425

沒有人喜歡提醒。 – Mikey

爲了讓你過一個div可調焦使用tabindex：

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

同時嘗試使用setTimeout給它一段時間才能focus。

注意：我建議真的使用另一個「靈活」模式插件比alert()。

希望這會有所幫助。

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

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

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

來源

2017-03-17 20:18:51

你可以用這個嘗試讓你的教程。我已經做了一次類似的事情。 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>

來源

2017-03-17 20:37:19

JavaScript專注於div，同時顯示警示框

回答

相關問題