关闭模态/弹出框不起作用

Question

我无法理解为什么当我点击'x'时，模态框/弹出窗口不会关闭。它完全没有反应。

这是JavaScript：

var kite = document.getElementById("poptext");
var kitetwo = document.getElementById("poptexttwo");
var closebtn = document.getElementById("close");

function seltst() {
  var kite = document.getElementById("poptext");
  var closebtn = document.getElementById("close");
  kite.style.display = 'block';
  setTimeout(el, 2000);
  kite.style.width = "500px";
}

function el() {
  kite.style.display = 'block';
}

function closepop() {
  kite.style.display = "none";
}

这是HTML：

<p>
  <input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
  <div id="poptext">
    <span id="close" onclick="closepop()">&times;</span>
    <p id="poptexttwo">
      lots of text about stuff<a href="aboutus.html">Contact us</a> more text!
    </p>
  </div>
</div>

请仅使用纯JavaScript解答。

Answer 1

很多冗余代码，在清理之后，这就是你得到的：

点击隐藏poptext，点击选择（突出显示）展示poptext

另请注意：确保您的脚本在</body>之前，并且必须在所有其他html之后，在我的示例中，如果您移动上面的脚本p将无效，为什么？

因为页面加载时你正在调用var kite = document.getElementById("poptext");但是元素尚未加载。

＆＃13;

＆＃13;

<p>
  <input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
  <div id="poptext">
    <span id="close" onclick="closepop()">&times;</span>
    <p id="poptexttwo">
      lots of text about stuff<a href="aboutus.html">Contact us</a> more text!
    </p>
  </div>
</div>
<script>
  var kite = document.getElementById("poptext");

  function seltst() {
    kite.style.display = 'block';
    kite.style.width = "500px";
  }

  function closepop() {
    kite.style.display = "none";
  }
</script>

＆＃13;

＆＃13;

＆＃13;

但是如果这样做会起作用，你在函数内部定义风筝，所以当调用函数时（元素已经加载）：

＆＃13;

＆＃13;

<script>
  function seltst() {
    var kite = document.getElementById("poptext");
    kite.style.display = 'block';
    kite.style.width = "500px";
  }

  function closepop() {
    var kite = document.getElementById("poptext");
    kite.style.display = "none";
  }
</script>
<p>
  <input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
  <div id="poptext">
    <span id="close" onclick="closepop()">&times;</span>
    <p id="poptexttwo">
      lots of text about stuff<a href="aboutus.html">Contact us</a> more text!
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的kite变量在全局范围内定义，但未在您尝试调用的函数中定义。通常情况下会没问题，但似乎它是在DOM加载之前声明的。

在closePop函数中重新声明该变量，你会没事的。

function closepop() {
   var kite = document.getElementById("poptext");
   kite.style.display = "none";
}