如何创建帮助弹出窗口[关闭]

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>