CODEWITHSUNDEEP
javascripthtmlcss
JavaNovice
JavaNovice

Reputation: 99

Closing modal /popup box will not work

I cannot work out why, when I click 'x', the modal box/pop up will not close. It is completely unresponsive.

Here is the 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";
}

and here is the 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>

Answers only in pure JavaScript please.

Upvotes: 1

Views: 86

Answers (2)

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

Your kite variable is defined at the global scope, however not defined in the function you're trying to call. Normally that would be fine, however, it seems it is declared before the DOM has loaded.

Redeclare that variable within the closePop function and you will be fine. 

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

Upvotes: -1

Dalin Huang
Dalin Huang

Reputation: 11342

Lots of redundant code, after clean up this is what you got:

On click hide poptext, on select (highlight) show poptext

ALSO: make sure your script is just before </body> and must after all other html, in my example if you move the script above p will not work, why?

Because when page load you are calling var kite = document.getElementById("poptext"); but the element is not loaded yet.

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

But if you do this will work, you define kite inside the function, so when the function is called (the element already loaded):

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

Upvotes: 2

Related Questions