Помогите удалить класс js

286

11 ноября 2018, 16:10

Переделываю модальное окно. Есть одна кнопка с одним классом и 4 кнопки с другим классом, которые открывают одно и тоже модальное окно и добавляют себе новый класс. Открытие модального окна и присвоение класса проходит нормально. Но когда пытаюсь закрыть модалку, то модалка закрывается, а класс не удаляется. Возникает конфликток между этими строчками
if (target.className == 'popup-close') { target.classList.remove('more-splash');
Как мне при нажатии на кнопку закрыть (close) найти кнопку с присвоенным классом и удалить его.

let overlay = document.querySelector('.overlay'),
close = document.querySelector('.popup-close');
document.addEventListener('click', function(event) {
    let target = event.target;
    if (target.className == 'description-btn' || target.className == 'more') 
    {
        target.classList.add('more-splash');
        overlay.style.display = "block";
        document.body.style.overflow = 'hidden';
    }
    if (target.className == 'popup-close') {
    target.classList.remove('more-splash');
    overlay.style.display = "none";
    document.body.style.overflow = '';
    }

});

https://codepen.io/Pavlenkovik/pen/qyGopo

Answer 1

Вероятнее всего, так: document.getElementsByClassName('more-splash')[0].classList.remove('more-splash'). У Вас этот класс вешается не на кнопку, а на div по которому кликнули, следовательно при нажатии на Close он не может удалиться, поскольку его попросту нет.

Правленный пример:

let overlay = document.querySelector('.overlay'), 
  description = document.querySelectorAll('.description-btn'), 
  more = document.querySelector('.more'), 
  close = document.querySelector('.popup-close'); 
 
document.addEventListener('click', function(event) { 
  let target = event.target; 
 
  if (target.className == 'description-btn' || target.className == 'more') { 
    target.classList.add('more-splash'); 
    overlay.style.display = "block"; 
    document.body.style.overflow = 'hidden'; 
    console.dir(target); 
    console.log(target.className); 
    console.log(target.classList); 
 
  } 
 
  if (target.className == 'popup-close') { 
    document.getElementsByClassName('more-splash')[0].classList.remove('more-splash'); 
    overlay.style.display = "none"; 
    document.body.style.overflow = ''; 
  } 
});

.content .info-tabcontent .description-btn { 
  width: 180px; 
  height: 45px; 
  line-height: 43px; 
  margin-top: 30px; 
  border: 1px solid #c78030; 
  font-size: 14px; 
  color: #c78030; 
  text-transform: uppercase; 
  font-weight: bold; 
  text-align: center; 
  font-weight: 300; 
  cursor: pointer; 
} 
 
.overlay { 
  position: fixed; 
  display: none; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 3; 
} 
 
.overlay .popup { 
  position: fixed; 
  z-index: 4; 
  left: 50%; 
  top: 150px; 
  width: 752px; 
  -webkit-transform: translateX(-50%); 
  -ms-transform: translateX(-50%); 
  transform: translateX(-50%); 
} 
 
.overlay .popup-close { 
  position: absolute; 
  right: -20px; 
  top: -35px; 
  cursor: pointer; 
  font-size: 35px; 
  color: #fff; 
  font-weight: 300; 
} 
 
.overlay .popup-title { 
  display: block; 
  width: 100%; 
  height: 71px; 
  line-height: 71px; 
  margin: 0; 
  background-color: #c78030; 
  color: #ffffff; 
  text-transform: uppercase; 
  font-size: 21px; 
  font-weight: 500; 
  text-align: center; 
}

<div class="content"> 
  <div class="container" id="about"> 
    <div class="info"> 
      <div class="info-header"> 
        <div class="info-header-tab"></div> 
        <div class="info-header-tab"></div> 
        <div class="info-header-tab"></div> 
        <div class="info-header-tab"></div> 
      </div> 
      <div class="info-tabcontent fade"> 
        <div class="description"> 
          <div class="description-title"></div> 
          <div class="description-text"> 
          </div> 
          <div class="description-btn"> 
            Узнать подробнее 
          </div> 
        </div> 
        <div class="photo"> 
 
        </div> 
      </div> 
      <div class="info-tabcontent fade"> 
        <div class="description"> 
          <div class="description-title"></div> 
          <div class="description-text"></div> 
          <div class="description-btn"> 
            Узнать подробнее 
          </div> 
        </div> 
        <div class="photo"> 
 
        </div> 
      </div> 
      <div class="info-tabcontent fade"> 
        <div class="description"> 
          <div class="description-title"></div> 
          <div class="description-text"></div> 
          <div class="description-btn"> 
            Узнать подробнее 
          </div> 
        </div> 
        <div class="photo"> 
 
        </div> 
      </div> 
      <div class="info-tabcontent fade"> 
        <div class="description"> 
          <div class="description-title"></div> 
          <div class="description-text"></div> 
          <div class="description-btn"> 
            Узнать подробнее 
          </div> 
        </div> 
        <div class="photo"> 
 
        </div> 
      </div> 
    </div> 
 
    <button class="more"> Узнать больше</button> 
 
 
 
  </div> 
 
</div> 
<div class="overlay fade"> 
  <div class="popup"> 
    <div class="popup-close">&times; 
    </div> 
    <div class="popup-title"> 
    </div> 
 
  </div> 
</div>