Подскажите пожалуйста, как ещё можно открыть/зыкрыть форму при клике на конпку и как закрыть форму при клике на фон?
<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);