Хочу закрыть форму JS

Рейтинг: 0Ответов: 2Опубликовано: 20.07.2023

Есть форма забыл упомянуть что у некоторых инпутов есть параметр required

введите сюда описание изображения

Она вызывается кнопкой

const button = document.querySelector('#button');
const form = document.querySelector('#form');
const popup = document.querySelector('.popup');

button.addEventListener('click', () => {
  form.classList.add('open');
  popup.classList.add('popup_open');
});

Хочу чтобы при нажатии на крестик она закрывалась На всякий укажу СSS касающийся её

#form.open {
    display: block;
}
.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(17, 17, 17, 0.5);
    transition: all 0.5s ease;
    display: none;
}
  
.popup_open {
    display: block;
}
  
.popup__container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    max-width: 588px;
    width: 100%;
}
  
.popup__wrapper {
    padding: 40px;
}
  
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
css javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Так, вы сделали кнопку которая навешивает класс, чтобы открыть форму, а теперь не можете сделать вторую кнопку, которая будет убирать эти классы. Серьезно?)

const closeButton = document.querySelector('#closeButton');

button.addEventListener('click', () => {
  form.classList.remove('open');
  popup.classList.remove('popup_open');
});

Не забудьте "крестику" дать id='closeButton'

UPD, пример кода:

const button = document.querySelector('#button');
const closeButton = document.querySelector('#closeButton');
const form = document.querySelector('.form');
const popup = document.querySelector('.popup');

button.addEventListener('click', () => {
  form.classList.add('open');
  //popup.classList.add('popup_open');
});

closeButton.addEventListener('click', () => {
  form.classList.remove('open');
  //popup.classList.remove('popup_open');
});
.form {
  display: none;
}

.open {
  display: block;  
}

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(17, 17, 17, 0.5);
    transition: all 0.5s ease;
    display: none;
}
  
.popup_open {
    display: block;
}
  
.popup__container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    max-width: 588px;
    width: 100%;
}
  
.popup__wrapper {
    padding: 40px;
}
  
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}
<form class="form">
  dfdfdffdfdf<br/>FORMA
  <button id="closeButton">
    Закрыть форму
  </button>
</form>

<button id="button">
  Открыть форму
</button>

<div class="popup">
  sdffddfd
</div>

Пришлось закомментировать функции открытия popup, т.к. из-за его стилей он перекрывал открытую форму и невозможно было на кнопку нажать. Но, думаю, у вас там по стилям лучше все сложится.

▲ 0

Хочу чтобы при нажатии на крестик она закрывалась

Можно использовать принцип примерно такой как в моем примере ниже...

const of = document.querySelector('#frm')
document.querySelector('#opn').addEventListener('click', _ => {
  of.classList.add('on')
})
of.addEventListener('click', e => {
  const o = e.target
  if (!o.classList.contains('off')) return
  of.classList.remove('on')
})
#frm {
  display: none;
  position: relative;
  width: 150px;
  height: 150px;
  border: 1px solid;
}
#frm.on{
  display: block;
}
#frm .off {
  position: absolute;
  top: 10px;
  right: 10px;
}
<button id='opn'>Открыть</button>
<div id='frm'>
  <button class='off'>X</button>
</div>