Exiting the modal/popup box is currently disabled

Question

Exiting the modal/popup box is currently disabled

I am struggling to figure out why the modal box/pop up is not closing when I click 'x'. It seems completely unresponsive.

Check out the JavaScript code below:

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";
}

Take a look at the HTML code as well:

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

Please provide answers using only pure JavaScript.

javascript html css

Answer 1

Answer №1

Upon closer inspection, an abundance of unnecessary code was identified. After a thorough cleanup process, the following streamlined version emerged:

Simply click to hide the poptext, and upon selection (highlighting), reveal the poptext.

Furthermore, ensure that your script is positioned just before the closing </body> tag. It should come after all other HTML elements. In my illustration, if you were to move the script above the p, it would cease to function properly. Why is this the case?

The issue arises because, during page load, the command

var kite = document.getElementById("poptext");

is executed while the element has not yet loaded.

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

Implementing this approach will yield success. By defining kite within the function, the element will be present when the function is invoked, ensuring seamless operation:

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

Answer 2

Upon closer inspection, an abundance of unnecessary code was identified. After a thorough cleanup process, the following streamlined version emerged:

Simply click to hide the poptext, and upon selection (highlighting), reveal the poptext.

Furthermore, ensure that your script is positioned just before the closing </body> tag. It should come after all other HTML elements. In my illustration, if you were to move the script above the p, it would cease to function properly. Why is this the case?

The issue arises because, during page load, the command

var kite = document.getElementById("poptext");

is executed while the element has not yet loaded.

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

Implementing this approach will yield success. By defining kite within the function, the element will be present when the function is invoked, ensuring seamless operation:

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

Answer 3

Answer №2

The kite variable is globally defined, but it is not available in the function you are attempting to use. This could be problematic since it appears to be declared before the document object model (DOM) has finished loading.

To resolve this issue, redeclare the kite variable within the closePop function.


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

Answer 4

The kite variable is globally defined, but it is not available in the function you are attempting to use. This could be problematic since it appears to be declared before the document object model (DOM) has finished loading.

To resolve this issue, redeclare the kite variable within the closePop function.


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

Exiting the modal/popup box is currently disabled

Answer №1

Implementing this approach will yield success. By defining kite within the function, the element will be present when the function is invoked, ensuring seamless operation:

Answer №2

Similar questions

Setting up multiple RabbitMQ or other backend servers within Node configurations

integrating a ui-bootstrap modal in a sidebar using angularjs

Revise the cascading style sheets for HTML content loaded via AJAX

Guide on attaching event handlers to a standard button template using Vue JS

Getting the ID of a button: A step-by-step guide

Adding and removing/hiding tab-panels in Angular 4 with PrimeNg: A step-by-step guide

Removing data from every page of a table with the Datatable plugin

JavaScript code that iterates through all files in a designated folder and its subfolders using a for loop

Receiving an undefined value of x in AJAX and web API

CSS - Overlapping <a> elements when resized

Error: Unable to access 'map' property of an undefined variable in NextJS while using getStaticPaths

Move anchor tags within HTML content produced from Markdown using Jekyll

Setting the value of a custom component property dynamically after the component has been rendered

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Utilizing prototype JS to create a dynamic floating widget or banner

Dynamic CSS columns with a set width on the left and right sides

Tips for choosing a nested element within a div using CSS

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

What mechanisms do chat apps use to detect when a user sends a message and trigger a re-render of the chat

Ways to retrieve the locale parameter from the URL in Next Js