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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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