Блог

Главная - Вопросы по программированию - Невозможно закрыть модальное поле, используя класс span с помощью GetElementByClass

Невозможно закрыть модальное поле, используя класс span с помощью GetElementByClass

#javascript #html

#javascript #HTML

Вопрос:

У меня есть несколько модальных полей с разными классами и идентификаторами, однако я не смог закрыть второе с <span class="classname">amp;times;</span> помощью GetElementByClass array 

 var layoutmodal = document.getElementById("layoutmodal");
var layoutbtn = document.getElementById("layoutbtn");
var layoutspan = document.getElementsByClassName("layoutclose")[0];
layoutbtn.onclick = function() {
  layoutmodal.style.display = "block";
}
layoutspan.onclick = function() {
  layoutmodal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == layoutmodal) {
    layoutmodal.style.display = "none";
  }
}

var colorsmodal = document.getElementById("colorsmodal");
var colorsbtn = document.getElementById("colorsbtn");
var colorsspan = document.getElementsByClassName("colorsclose")[0];
colorsbtn.onclick = function() {
  colorsmodal.style.display = "block";
}
colorsspan.onclick = function() {
  colorsmodal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == colorsmodal) {
    colorsmodal.style.display = "none";
  }
}  
 <div id="layoutmodal" class="modal">
  <div class="modal-content" style="border-radius:7px;">
    <span class="layoutclose">amp;times;</span>
    <p style="font-family: verdana;text-align:center;">Choose Layout</p>
    <div>
      <img src="images/layouts/lay1.png" class="imglayout" alt="" style="margin-left: 15%;" />
      <img src="images/layouts/lay2.png" class="imglayout" alt="" style="margin-left: 10%;" />
    </div>
  </div>
</div>

<div id="colorsmodal" class="modal">
  <div class="modal-content">
    <span class="colorsclose">amp;times;</span>
    <p style="font-family: verdana;text-align:center;">Choose Color</p>
    <div>
      <img src="images/layouts/lay1.png" alt="" style="margin-left: 18%;" />
      <img src="images/layouts/lay2.png" alt="" />
    </div>
  </div>
</div>

Возможность закрыть первый модальный однако, второй не может быть закрыт.
Любая помощь будет очень признательна.

Комментарии:

1. Похоже, что код работает, хотя в вашем вопросе не указаны две кнопки для открытия модальных диалоговых окон. Если они добавлены, обе кнопки «закрыть» работают.

2. Обратите внимание, что если у вас на странице более одного модального диалогового окна «Цвета», код не будет работать, потому что он действует только на первую кнопку «закрыть» на странице.

3. @Pointy У меня добавлена кнопка, и у меня есть только одно закрытие для каждого всплывающего окна с разными именами классов. Тем не менее, я все еще не могу закрыть второе модальное поле

4. Под «вторым модальным полем» вы подразумеваете поле «цвета» в опубликованном вами коде?

5. Ну, это отлично работает в той версии кода, которую вы опубликовали.

Ответ №1:

Вы явно обращаетесь к первому элементу и полностью игнорируете другие результаты, используя следующий оператор:

 document.getElementsByClassName("colorsclose")[0]

Но вы, вероятно, имеете в виду сделать что-то вроде:

 for (let element of document.getElementsByClassName("colorsclose")) {
    // ...
}

Комментарии:

1. Код действительно работает, однако неясно, в чем проблема. Ваш комментарий точен, но не имеет значения, есть ли на странице только один из этих элементов.

2. Верно, но опять же неясно, есть ли на странице более одной из этих вещей. Вопрос неясен: означает ли «второй» второй модальный в опубликованном коде или второй экземпляр одного (или обоих) из них? Я не знаю ответа.

3. Да, теперь я понимаю вашу точку зрения. Наверное, я неправильно истолковал вопрос

Ответ №2:

Как насчет более простого и универсального кода?

этот код соответствует любому количеству модальных значений, сколько у вас есть modal , и modal-close классов в вашем модальном. При этом нет необходимости жестко кодировать все модалы.

 var ms = document.querySelectorAll('.modal'); // which is closen
ms.forEach((m) => {
    var mc = m.querySelector('.modal-close'); // which is listen close event
    mc.addEventListener('click', (e) => {
        m.style.display = "none";
    })
})  
 <div id="layoutmodal" class="modal">
  <div class="modal-content" style="border-radius:7px;">
    <span class="modal-close">amp;times;</span>
    <p style="font-family: verdana;text-align:center;">Choose Layout</p>
    <div>
        <img src="images/layouts/lay1.png" class="imglayout" alt="" style="margin-left: 15%;" />
        <img src="images/layouts/lay2.png" class="imglayout" alt="" style="margin-left: 10%;" />
    </div>
  </div>
</div>

<div id="colorsmodal" class="modal">
  <div class="modal-content">
    <span class="modal-close">amp;times;</span>
    <p style="font-family: verdana;text-align:center;">Choose Color</p>
    <div>
        <img src="images/layouts/lay1.png" alt="" style="margin-left: 18%;" />
        <img src="images/layouts/lay2.png" alt="" />
    </div>
  </div>
</div>

Кстати, не забудьте отметить как решаемый. 😉