Извините что так вставляю код.
В jS прописано закрывание формы по клику на кнопку. Как её закрыть по клику за её приделами ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flipside</title>
<meta name="description" content="">
<meta name="author" content="Hakim El Hattab">
<meta name="viewport" content="width=460, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$('#footer-form').click(function(event) {
$('#footer-form').toggle();
});
$(document).click(function (event) {
if ($(event.target).closest('#footer-form').length == 0 && $(event.target).attr('id') != 'btn-form') {
$('#footer-form').hide();
}
});
});
</script>
</head>
<body>
<div class="btn">
<div class="btn-back" id="footer-form">
<form action="" method="post">
<div class="form-footer">
<input type="text" placeholder="Ваше имя"/>
<input type="text" placeholder="Телефон"/>
<input type="text" placeholder="E-mail"/>
<textarea name="" id="" cols="35" rows="3" placeholder="Комментарий"></textarea>
</div>
<button class="yes" type="submit" id="btn-form">Связаться</button>
<button class="no" type="submit">Закрыть</button>
</form>
</div>
<div class="btn-front">Напишите нам</div>
</div>
<script src="main.js"></script>
</body>
</html>
window.onload = function() {
var btn = document.querySelector( '.btn' );
var btnFront = btn.querySelector( '.btn-front' ),
btnYes = btn.querySelector( '.btn-back .yes' ),
btnNo = btn.querySelector( '.btn-back .no' );
btnFront.addEventListener( 'click', function( event ) {
var mx = event.clientX - btn.offsetLeft,
my = event.clientY - btn.offsetTop;
var w = btn.offsetWidth,
h = btn.offsetHeight;
var directions = [
{ id: 'top', x: w/2, y: 0 },
{ id: 'right', x: w, y: h/2 },
{ id: 'bottom', x: w/2, y: h },
{ id: 'left', x: 0, y: h/2 }
];
directions.sort( function( a, b ) {
return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
} );
btn.setAttribute( 'data-direction', directions.shift().id );
btn.classList.add( 'is-open' );
} );
btnYes.addEventListener( 'click', function( event ) {
btn.classList.remove( 'is-open' );
} );
btnNo.addEventListener( 'click', function( event ) {
btn.classList.remove( 'is-open' );
} );
function distance( x1, y1, x2, y2 ) {
var dx = x1-x2;
var dy = y1-y2;
return Math.sqrt( dx*dx + dy*dy );
}
};
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
html, body {
width: 100%;
height: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-family: Roboto, "Uni Sans", sans-serif;
font-size: 18px;
-webkit-perspective: 1000px;
perspective: 1000px;
background-color: #f5f5f5;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
::-webkit-input-placeholder {color:#fff;}
::-moz-placeholder {color:#fff;}/* Firefox 19+ */
:-moz-placeholder {color:#fff;}/* Firefox 18- */
:-ms-input-placeholder {color:#fff; font-size: 16px}
.btn.is-open ~ .description {
opacity: 0; }
.form-footer{
float: left;
padding: 25px;
margin-bottom: 50px;
}
.form-footer input{
width: 332px;
display: inline-block;
background: none;
border: 2px solid rgba(255,255,255,0.7);
color: #fff;
font-size: 16px;
padding: 15px;
margin-bottom: 10px;
float: left;
}
.form-footer textarea{
background: none;
border: 2px solid rgba(255,255,255,0.7);
color: #fff;
font-size: 16px;
padding: 15px;
}
.form-footer textarea,input:focus{
border: 2px solid rgba(255,255,255,1);
}
.form-footer textarea,input:hover{
border: 2px solid rgba(255,255,255,1);
}
.btn {
display: block;
position: relative;
width: 400px;
height: 80px;
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-align: center; }
.btn-front {
display: block;
width: 100%;
line-height: 80px;
background-color: #2a303e;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
max-width: 520px;
height: 95px;
font-family: Apetite;
text-transform: uppercase;
font-size: 40px;
line-height: 100px;
color: #fff;
}
.btn-front:hover {
background-color: #444a5d; }
.btn.is-open .btn-front {
pointer-events: none;
line-height: 160px; }
.btn-back {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255,132,0,0.5) url("bg.png");
color: #222;
-webkit-transform: translateZ(-1px) rotateX(180deg);
transform: translateZ(-1px) rotateX(180deg);
overflow: hidden;
transition: box-shadow 0.8s ease; }
.btn-back p {
margin-top: 27px;
margin-bottom: 25px; }
.btn-back button {
padding: 12px 16px;
width: 100%;
background-color: transparent;
border: 0;
border-radius: 2px;
font-size: 1em;
cursor: pointer;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: background 0.15s ease; }
.btn-back button:focus {
outline: 0; }
.btn-back button.yes {
background-color: #ff8400;
color: #fff;
float: right;
bottom: 0;
position: absolute;
right: 0;
margin: 0;
border-radius: 0;
height: 65px;
box-shadow: inset 0 -2px rgba(0,0,0,0.25);
font-size: 48px;
padding: 5px;
}
.btn-back button.yes:hover {
background: rgb(255,147,31);
box-shadow: inset 0 -4px rgba(0,0,0,0.15);
transition: box-shadow 1s ease;
transition-property: box-shadow;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: initial;
}
.btn-back button.no {
color: #2196F3; }
.btn-back button.no:hover {
background-color: #ddd; }
.btn.is-open .btn-back {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
.btn[data-direction="left"] .btn-back, .btn[data-direction="right"] .btn-back {
-webkit-transform: translateZ(-1px) rotateY(180deg);
transform: translateZ(-1px) rotateY(180deg); }
.btn.is-open {
width: 420px;
height: 395px;
}
.btn[data-direction="top"].is-open {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.btn[data-direction="right"].is-open {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
.btn[data-direction="bottom"].is-open {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg); }
.btn[data-direction="left"].is-open {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg); }
