После нажатия на кнопку "Заказать звонок" эта кнопка исчезает, вся страница покрывается маской, поверх которой выводится форма. При клике на область маски - всё возвращается на своё место (появляется кнопка, исчезают маска с формой). Но вот при клике на поле формы скрипт считает, что нажал на маску и всё-равно закрывает всё. Как идентифицировать нажатие именно на поле формы при нажатии на маску?
.order-call-btn
{
animation-name: pulse-bg;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
margin: 3px;
font-size: 150%;
font-family: Arial, Helvetica, sans-serif;
z-index: 998;
}
.order-call-btn:hover
{
animation: none;
background: transparent;
}
.mask {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 5004;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0.5s;
transition: opacity 0.5s, visibility 0.5s;
}
.mask.active {
visibility: visible;
opacity: 0.8;
}
.hidden {
visibility: hidden;
}
.order-call-form
{
display: block;
position: fixed;
top: 50%;
left: 50%;
z-index: 5005;
}
.right {
text-align: right;
}
<a class="btn btn-default affix order-call-btn" >Заказать звонок</a>
<form action="models/auth.php" class='order-call-form'>
<table>
<tr>
<td class="right">Имя</td>
<td><input type="text" name="name" required></td>
</tr>
<tr>
<td class="right">Номер</td>
<td><input type="text" name="phone" required></td>
</tr>
</table>
<input type="submit" value="Заказать" class="btn btn-default">
</form>
this.call_btn = document.querySelector(".order-call-btn");
this.call_form = document.querySelector(".order-call-form");
this.mask = document.createElement("div");
this.mask.className = "mask";
document.body.appendChild(this.mask);
this.mask.appendChild(this.call_form);
$( ".order-call-btn" ).click(function() {
mask.classList.add("active");
call_btn.classList.add("hidden");
});
$( ".mask" ).click(function(e) {
if(e.className != "call_form") {
mask.classList.remove("active");
call_btn.classList.remove("hidden");
};
});
Да, знаю, что от кода неприятно пахнет, но давайте пока без этой критики)
На jsfiddle не подгрузил, ибо там всё не так отображается, как есть на самом деле (у меня проэкт большой, smarty генерирует много css-файлов, sass-файлов, js-файлов; всё не отследишь, чтобы запихнуть на jsfiddle). Вот в строке '$( ".mask" ).click(function(e)' функция принимает некий объект. Я пытался как-то поиграть с ним, но знания js малы, поэтому и спрашиваю здесь. Заранее благодарю.
