如何創建幫助彈出框

Question

我想在窗體上的一個問題旁邊添加一個小框，並詢問當單擊該窗體時將彈出一個文本框來獲得關於該問題的幫助。我如何添加一些Java腳本來創建彈出框，當點擊而不是使用鼠標時彈出框

Answer 1

設計它，只要你喜歡。

請注意，您可以添加多個幫助彈出窗口。只需添加class="help"和title包含幫助文本。

var helpBox = document.getElementById("helpBox"); 
 
var helpElements = document.getElementsByClassName("help"); 
 

 
for (var i = 0; i < helpElements.length; i++) { 
 
    helpElements[i]._helpText = helpElements[i].title; 
 
    helpElements[i].removeAttribute("title"); 
 
    
 
    helpElements[i].onclick = function(e) { 
 
    helpBox.style.display = "block"; 
 
    helpBox.innerHTML = "<span id='close' title='Close'>X</span>" + 
 
     e.target._helpText; 
 
    
 
    helpBox.children[0].onclick = function() { 
 
     helpBox.style.display = "none"; 
 
    } 
 
    } 
 
}

body { 
 
    background-color: #f4f4f4; 
 
    font-family: sans-serif; 
 
} 
 

 
.help { 
 
    cursor: help; 
 
} 
 

 
#helpBox { 
 
    position: absolute; 
 
    top: 100px; 
 
    display: none; 
 
    width: 300px; 
 
    left: 50%; 
 
    margin-left: -150px; 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
    background-color: white; 
 
    z-index: 1000; 
 
} 
 

 
#helpBox #close { 
 
    float: right; 
 
    cursor: pointer; 
 
    background-color: red; 
 
    color: white; 
 
    padding: 0 6px; 
 
}

<span class="help" title="Help text">Help</span> 
 
<div id="helpBox"></div>