为何onclick触发的模态框函数首次点击无响应，后续正常？

我是非技术人员，仅能为个人小项目搭建基础网站。我在制作一个简单网站时，需要用HTML/JS添加模态框（代码如下），运行时首次点击无法加载模态框，但从第二次点击开始正常。我尝试过查找资料，但要么没找到相关内容，要么大部分内容无法理解。（上述代码源自W3schools的表单教程）

编辑说明：我使用fid变量是因为需要在页面中多次调用该函数，因此没有在document.getElementById(fid)中直接使用"mybtn"。

现有代码 #

JavaScript代码

<script>
   function myfunc(fid) {
      var modal = document.getElementById("myModal");
      var btn = document.getElementById(fid);
      var span = document.getElementsByClassName("close")[0];
      btn.onclick = function () {
         modal.style.display = "block";
      };
      span.onclick = function () {
         modal.style.display = "none";
      };
      window.onclick = function (event) {
         if (event.target == modal) {
            modal.style.display = "none";
         }
      };
   }
</script>

HTML代码

<a id="myBtn" class="btn" onclick="myfunc('myBtn')">Enquire Now</a>

原因 #

第一次点击按钮时，你调用的myfunc函数只是给按钮绑定了显示模态框的点击规则，并没有直接让模态框显示出来。所以第一次点击相当于完成了“准备工作”，第二次点击才会触发刚绑定好的规则，让模态框显示。

两种简单修改方案 #

方案1：绑定规则后直接显示模态框（最容易修改）

在函数里给按钮绑定完点击规则后，直接加一行代码让模态框显示，这样第一次点击就能看到效果：

<script>
   function myfunc(fid) {
      var modal = document.getElementById("myModal");
      var btn = document.getElementById(fid);
      var span = document.getElementsByClassName("close")[0];
      btn.onclick = function () {
         modal.style.display = "block";
      };
      span.onclick = function () {
         modal.style.display = "none";
      };
      window.onclick = function (event) {
         if (event.target == modal) {
            modal.style.display = "none";
         }
      };
      // 新增这行：第一次调用函数时直接显示模态框
      modal.style.display = "block";
   }
</script>

方案2：提前绑定规则（更规范，适合多个按钮复用）

把绑定关闭规则的代码放到页面加载完成后自动执行，按钮的点击事件直接改成“显示模态框”，这样不用每次点击都重复绑定规则，多个按钮用起来更省心：

• 修改后的JavaScript代码：

<script>
// 页面加载完成后自动执行，绑定关闭模态框的规则
window.onload = function() {
   var modal = document.getElementById("myModal");
   var span = document.getElementsByClassName("close")[0];

   // 点击关闭按钮隐藏模态框
   span.onclick = function () {
      modal.style.display = "none";
   };
   // 点击模态框背景隐藏模态框
   window.onclick = function (event) {
      if (event.target == modal) {
         modal.style.display = "none";
      }
   };
}

// 专门用来显示模态框的函数
function showModal() {
   var modal = document.getElementById("myModal");
   modal.style.display = "block";
}
</script>

• 修改后的HTML代码：

<a id="myBtn" class="btn" onclick="showModal()">Enquire Now</a>

如果有多个按钮需要触发模态框，直接给每个按钮的onclick属性写showModal()就行，不用传ID，操作更简单。

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