Скрыть "закрыть" ссылки, когда модальный не открыт - PullRequest
Новая
       22

Скрыть "закрыть" ссылки, когда модальный не открыт

1 голос
/ 19 января 2020

Я работал над этим часами, я пробовал vars, я пытался скрыть элементы, и ничего не работает, и и и ... извините за волнение, но я почти до конца,

проблема :: У меня есть базовый c javascript модальный, взятый из школ w3, который был немного изменен в соответствии с моими потребностями, https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

мой javascript код ниже.

Что мне нужно, мне нужно скрыть диапазон ЗАКРЫТЬ, когда модальное всплывающее окно скрыто,

<span class="close">CLOSE</span> другими словами, я не хочу закрывать ссылку показывая, что ссылка thw close должна быть скрыта, когда модальный режим закрыт, и показывает, когда модал открыт.

вот мой код ниже, могу ли я получить рабочий javascript пример.

Любая помощь будет принята с благодарностью 

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

Ответы [ 2 ]

2 голосов
/ 19 января 2020

Если я вас правильно понимаю. Попробуйте это: 

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

Было бы лучше, если бы мы выдавали повторяющийся код в отдельных функциях.

2 голосов
/ 19 января 2020

Просто добавьте к вашей функции показа / скрытия соответствующий диапазон скрытия / показа:

Измените closeModal () на: 

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

и измените btn.onclick на: 

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

Я вижу, вы используете getElementsByClassName(), который возвращает (всегда) массив результатов (поэтому я использую индекс ([0]) для доступа к найденному элементу). На вашем месте я бы добавил новый id к промежутку, чтобы вы могли быть уверены в том, что вы нацеливаетесь.

Взгляните на Изменение HTML стиля

...