如何创建帮助弹出框

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>