CODEWITHSUNDEEP
javascripthtmlmodal-dialogpopup
Chaz Steiner
Chaz Steiner

Reputation: 527

Hide 'close' links when modal is not open

Ive been working on this for hours, I've tried vars, I tried hiding elements, and nothing is working and and and.. sorry for the exitement, but I'm almost down to the end,

the issue:: I have a basic javascript modal, taken from w3 schools, which has been altered slightly per my needs, https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

my javascript code is below.

What I need is, I need to hide the CLOSE span when the modal pop up is hidden,

<span class="close">CLOSE</span> in other words, I dont want the close link showing at all times, thw close link should be hidden when modal os closed, and showing when modal is open.

here is my code below, can I please get a working javascript example.

Any help would be greatly appreciated

function closeModal() {
  modal.style.display = "none";
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
  closeBtn.onclick = closeModal;
}

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>```

Upvotes: 1

Views: 43

Answers (2)

Radmir Nabiullin
Radmir Nabiullin

Reputation: 36

If I understand you correctly. Try this:

function closeModal() {
  modal.style.display = "none";
  for (let closeBtn of spans) {
    closeBtn.style.display = 'none';
  }
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
  closeBtn.onclick = closeModal;
  closeBtn.style.display = 'none';
}

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";

  for (let closeBtn of spans) {
    closeBtn.style.display = 'inline';
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
    for (let closeBtn of spans) {
      closeBtn.style.display = 'none';
    }
  }
}
</script>```

It would be better if we put out the repeating code in separate functions.

Upvotes: 2

Mortimer
Mortimer

Reputation: 402

Just add to your show/hide function appropriate hide/show span:

Change closeModal() to:

function closeModal() {
  modal.style.display = "none";
  spans[0].style.display = "block";
}

and change btn.onclick to:

btn.onclick = function() {
  modal.style.display = "block";
  spans[0].style.display = "none";
}

I see you are using getElementsByClassName() which is returning (always) array of results (thats why I'm using index ([0]) to access found element). If I were you I would add new id to the span so you can be sure what you target.

Have a look at Changing HTML style

Upvotes: 2

Related Questions