HTML. При нажатии на кнопку всплывает форма

118

09 января 2021, 04:00

Ребят, очень нужно. Как сделать так, чтобы при нажатии на кнопку всплывала форма с с полями, куда пользователь мог бы внести данные и тем самым зарегистрироваться.

document.getElementById('blablabla').style.display = 'none'; 
 
function blablabla() { 
  document.getElementById('blablabla').style.display = 'block'; 
}

<button onclick='blablabla()'>Показать форму</button> 
<div id='blablabla'> 
  <form role="form" action="/requestFine" autocomplete="off" method="POST"> 
    <label>Ім'я:</label> 
    <input type="text" name="nameReq"> 
    <label>Прізвище:</label> 
    <input type="text" name="lastNameReq"> 
    <label>Телефон:</label> 
    <input type="text" name="telReq"> 
    <label>Опис:</label> 
    <input type="text" name="textReq"> 
    <button type="submit" class="btn btn-success">Отправить</button> 
  </form> 
</div>

Answer 1

Через display: none/block, если нужно.

const button = document.querySelector('button'); 
const form = document.querySelector('#blablabla'); 
 
button.addEventListener('click', () => { 
  form.classList.add('open'); 
});

#blablabla { 
  display: none; 
  animation-duration: 1.5s; 
  animation-fill-mode: both; 
  animation-name: fadeIn; 
} 
 
#blablabla.open { 
  display: block; 
} 
 
@keyframes fadeIn { 
  from { 
    opacity: 0; 
  } 
  to { 
    opacity: 1; 
  } 
}

<button>Показать форму</button> 
<div id="blablabla"> 
  <form role="form" action="/requestFine" autocomplete="off" method="POST"> 
    <label>Ім'я:</label> 
    <input type="text" name="nameReq"> 
    <label>Прізвище:</label> 
    <input type="text" name="lastNameReq"> 
    <label>Телефон:</label> 
    <input type="text" name="telReq"> 
    <label>Опис:</label> 
    <input type="text" name="textReq"> 
    <button type="submit" class="btn btn-success">Отправить</button> 
  </form> 
</div>

UPD. С Popup окном. (Может пригодится)

const button = document.querySelector('button'); 
const form = document.querySelector('#blablabla'); 
const popup = document.querySelector('.popup'); 
 
button.addEventListener('click', () => { 
  form.classList.add('open'); 
  popup.classList.add('popup_open'); 
});

#blablabla { 
  display: none; 
  animation-duration: 1.5s; 
  animation-fill-mode: both; 
  animation-name: fadeIn; 
} 
 
#blablabla.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; 
  } 
}

<button>Показать форму</button> 
 
<div class="popup"> 
  <div class="popup__container"> 
    <div class="popup__wrapper"> 
      <div id="blablabla"> 
        <form role="form" action="/requestFine" autocomplete="off" method="POST"> 
          <label>Ім'я:</label> 
          <input type="text" name="nameReq"> 
          <label>Прізвище:</label> 
          <input type="text" name="lastNameReq"> 
          <label>Телефон:</label> 
          <input type="text" name="telReq"> 
          <label>Опис:</label> 
          <input type="text" name="textReq"> 
          <button type="submit" class="btn btn-success">Отправить</button> 
        </form> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

Чтобы форма всплывала, можно реализовать это по разному.

Лично я думаю, что автор говоря всплывала, имеет ввиду плавность. Конечно, можно добиться плавности и с помощью js, но лучше css.

И еще один важный момент: свойство display:none; && display:block; Трансформации не поддаются. Так что если нужна плавность без opacity не обойтись.

const formWrap = document.getElementById('form-wrap'); 
 
function openForm() { 
    formWrap.classList.add('open'); 
}

#form-wrap { 
  opacity: 0; 
  transition: opacity .5s; 
} 
 
#form-wrap.open { 
  transition: opacity .5s; 
  opacity: 1; 
}

<button onclick='openForm()'>Показать форму</button> 
<div id='form-wrap'> 
  <form role="form" action="/requestFine" autocomplete="off" method="POST"> 
    <label>Ім'я:</label> 
    <input type="text" name="nameReq"> 
    <label>Прізвище:</label> 
    <input type="text" name="lastNameReq"> 
    <label>Телефон:</label> 
    <input type="text" name="telReq"> 
    <label>Опис:</label> 
    <input type="text" name="textReq"> 
    <button type="submit" class="btn btn-success">Отправить</button> 
  </form> 
</div>

P.S. А если все же display:none; && display:block; обязательны, то реализовать по другому....

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Uncaught TypeError: Cannot read property 'style' of null

Здраствуйте, у меня появилась проблема - Uncaught TypeError: Cannot read property 'style' of null

115

javascript

Remove в JavaScript

Не получается удалить объект

118

javascript

Закруглить края у canvas

Есть код как тут закруглить края

131

javascript

Поймать свайп вправо

Есть объект <div class="music--container">Как на JS поймать тот момент, когда 50% левой области объекта пытаются потянуть вправо и выполнить к примеру...

115