点击模态框内关闭元素（span）无法关闭模态框的技术问题求助

嘿，我立马就发现问题所在啦！你把关闭模态框的函数命名成了close，但这个名字早就被浏览器的全局内置函数占用了——window.close()是浏览器原生用来关闭整个窗口的方法，当你在按钮的onclick里调用close()时，浏览器优先执行了这个原生方法，完全没理你自己写的关闭模态框逻辑，所以模态框自然纹丝不动。

修复起来超简单，只需要两步： #

• 把自定义的关闭函数改名，比如改成closeModal，彻底避开和原生函数的重名冲突
• 同步修改按钮onclick里的函数调用名

修改后的完整代码： #

var buyModal = document.getElementById("buyModal"); 
var sellModal = document.getElementById("sellModal"); 
function buy() { buyModal.style.display = "block"; } 
function sell() { sellModal.style.display = "block"; } 
// 重命名函数，避免冲突
function closeModal() { 
  buyModal.style.display = "none"; 
  sellModal.style.display = "none"; 
} 

对应的HTML部分：

<button id="buyButton" onclick="buy()">Buy a Currency Pair</button> 
<button id="sellButton" onclick="sell()">Sell a Currency Pair</button> 
<div id="buyModal" class="modal"> 
  <div class="modal-content"> 
    <!-- 同步修改函数调用 -->
    <button class="close" onclick="closeModal()">&times;</button> 
    <p>Buy</p> 
  </div> 
</div> 
<div id="sellModal" class="modal"> 
  <div class="modal-content"> 
    <!-- 同步修改函数调用 -->
    <button class="close" onclick="closeModal()">&times;</button> 
    <p>Sell</p> 
  </div> 
</div>

额外优化建议： #

如果想让关闭按钮只关闭当前对应的模态框（而不是两个一起关），可以给函数加个参数，精准控制：

function closeModal(modalId) {
  document.getElementById(modalId).style.display = "none";
}

然后HTML里调用时传入对应模态框的ID：

<!-- 买入模态框的关闭按钮 -->
<button class="close" onclick="closeModal('buyModal')">&times;</button>
<!-- 卖出模态框的关闭按钮 -->
<button class="close" onclick="closeModal('sellModal')">&times;</button>

这样点击哪个模态框的关闭按钮，就只会关闭那个框，体验会更流畅~

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