HTML新手求助：如何实现点击后弹出文本消失？

嘿，没问题！作为HTML初学者，遇到这种小需求很正常，我来帮你搞定点击后弹出文本消失的功能～

1. 补充显示/隐藏弹出框的JavaScript逻辑 #

首先，你的popup()函数应该是用来让弹出文本显示的，我们需要新增一个hidePopup()函数来负责隐藏它。把这段代码放在HTML的<body>末尾（用<script>标签包裹）：

function popup() {
  // 让弹出文本显示出来
  document.getElementById("myPopup").style.display = "block";
}

function hidePopup() {
  // 让弹出文本消失
  document.getElementById("myPopup").style.display = "none";
}

// 记得补上你原来的ak12M函数（如果还没写的话）
function ak12M() {
  // 这里放你原本想实现的ak12M逻辑，比如修改p标签内容等
}

2. 给点击元素绑定隐藏函数 #

接下来，给你想要触发“弹出文本消失”的按钮加上onclick="hidePopup()"就行，分两种情况：

• 如果点击AK-12按钮后让弹出文本消失，修改按钮代码：

<button onclick="ak12M(); hidePopup()"> 
  <img id="ak-12" src="ak-12.png"/>AK-12
</button>

• 如果点击“Weapon info”按钮后让弹出文本消失，修改这个按钮的代码：

<input type="button" id="ak12B" value="Weapon info" onclick="hidePopup(); location.href='http://symthic.com/bf4-weapon-info?w=AK-12';"/>

（注：其实点击这个按钮会跳转页面，页面跳转后弹出框自然就没了，但如果想在跳转前先隐藏弹出框，就加上hidePopup()）

3. 可选：点击弹出文本本身也消失 #

如果想让用户点击“Click for more”这段文本时，弹出框也消失，可以给<span>标签加上点击事件：

<span class="popuptext" id="myPopup" onclick="hidePopup()">Click for more</span>

完整整合后的代码示例 #

把所有部分拼起来，大概是这样：

<div class="popup" onmouseover="popup()"> 
  <span class="popuptext" id="myPopup" onclick="hidePopup()">Click for more</span> 
  <button onclick="ak12M(); hidePopup()"> 
    <img id="ak-12" src="ak-12.png"/>AK-12
  </button> 
</div> 
<input type="button" id="ak12B" value="Weapon info" onclick="hidePopup(); location.href='http://symthic.com/bf4-weapon-info?w=AK-12';"/> 
<p id="ak-12SZ">The AK-12, formerly AK-200,<br>...</p>

<script>
function popup() {
  document.getElementById("myPopup").style.display = "block";
}

function hidePopup() {
  document.getElementById("myPopup").style.display = "none";
}

function ak12M() {
  // 这里写你原本的ak12M函数逻辑
}
</script>

如果你的popup()函数原本是用visibility属性控制显示的，只需要把style.display换成style.visibility就行（显示用visible，隐藏用hidden）。

内容的提问来源于stack exchange，提问作者Somebody