如何创建“帮助”弹出窗口

Question

我想在我要求的表单上的问题旁边添加一个小方框，点击后会弹出一个文本框以获取有关该问题的帮助。我如何添加一些java脚本来创建一个弹出框，该弹出框在单击时显示而不是在鼠标上使用

Answer 1

随意设计。

请注意，您可以添加多个帮助弹出窗口。只需添加class="help"和包含帮助文字的title。

＆＃13;

＆＃13;

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";
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;