0

Подскажите пожалуйста, как ещё можно открыть/зыкрыть форму при клике на конпку и как закрыть форму при клике на фон?

<div class="block">
        <button class="button" >Кнопка</button>
        <div class="block-form">
            <form class="form" action="#" method="post">
                <h2>Форма</h2>
                <div class="form__item">
                    <input id="" type="text" name="youname" class="form__input" required placeholder="Name">
                </div>
                <div class="form__item">
                    <input id="" type="text" name="youemail" class="form__input" required placeholder="Email">
                </div>
                <div class="form__item">
                    <textarea name="message44" id="" class="form__input" required placeholder="Message"></textarea>
                </div>
                <button type="submit" class="send">Send</button>
            </form>
        </div>                                                
    </div>     
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="js6/script.js"></script>
.block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;    
    width: 400px;
    padding: 20px 0;
    cursor: pointer;
}
.button {
    margin-bottom: 20px;
    padding: 20px 40px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    background-color: dodgerblue;
    outline: none;
    border: none;
}
.button:hover {
    background-color: #1b7ee0;
}
.block-form {
    width: 280px;
    height: 100%;
    text-align: center;
    border: 1px solid grey;
    background-color: #dcdcdc;
    display: none;
}
.form__input {
    width: 250px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;   
}
textarea.form__input {
    min-height: 120px;
    resize: vertical;
}
.send {
    width: 250px;
    height: 40px;
    color: #fff;
    font-size: 16px;
    margin: 5px 0 20px 0;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: red;
    border: 0;
    outline: none;
}
.send:hover {
    background-color: rgb(205, 0, 0);
}
(function( $ ) {
    var object = {
        toggleButton: '.button',
        formContainer: '.block-form'
    };

    $(object.toggleButton).on('click', function() {
        var form = $(object.formContainer);

        if (form.hasClass('active')) {
            form.fadeOut('slow').removeClass('active');
        } else {
            form.fadeIn('slow').addClass('active');
        }
    });
})(jQuery); 
1
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. 18 мар 2022 в 13:30

1 ответ 1

1

Наверное как-то так)

const btn = document.querySelector('.button');

btn.addEventListener('click', function() {
  this.nextElementSibling.classList.toggle('show');
})
.block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 400px;
  padding: 20px 0;
  cursor: pointer;
}

.button {
  margin-bottom: 20px;
  padding: 20px 40px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  background-color: dodgerblue;
  outline: none;
  border: none;
}

.button:hover {
  background-color: #1b7ee0;
}

.block-form {
  width: 280px;
  height: 100%;
  text-align: center;
  border: 1px solid grey;
  background-color: #dcdcdc;
  display: none;
}

.show{
  display: block;
}

.form__input {
  width: 250px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}

textarea.form__input {
  min-height: 120px;
  resize: vertical;
}

.send {
  width: 250px;
  height: 40px;
  color: #fff;
  font-size: 16px;
  margin: 5px 0 20px 0;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  background-color: red;
  border: 0;
  outline: none;
}

.send:hover {
  background-color: rgb(205, 0, 0);
}
<div class="block">
  <button class="button">Кнопка</button>
  <div class="block-form">
    <form class="form" action="#" method="post">
      <h2>Форма</h2>
      <div class="form__item">
        <input id="" type="text" name="youname" class="form__input" required placeholder="Name">
      </div>
      <div class="form__item">
        <input id="" type="text" name="youemail" class="form__input" required placeholder="Email">
      </div>
      <div class="form__item">
        <textarea name="message44" id="" class="form__input" required placeholder="Message"></textarea>
      </div>
      <button type="submit" class="send">Send</button>
    </form>
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="js6/script.js"></script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.