Народ, а помогите мне тоже пожалуйста. Есть сайт:
http://xn--80abl9cua.top/. Там есть кнопка вверху "Заказать звонок". Форма появляется, а вот по щелчку на крестик или на область, за пределами формы - не закрывается. Посмотрите пожалуйста, в чём причина?
callback.js:
// ========= (c)2015 :: html & css & jquery coding :: Polyakov - [url]http://polyakov.co.ua[/url] =========
// ========================================================================= contact_form
$(function() {
//Функция проверяет заполнено ли поле с телефоном
function formValide() {
var str = $('#contact_form input[name=tel]').val();
str = jQuery.trim(str);
if(str.length < 5){
alert ('Введите телефон');
return false;
}
return true;
}
//при нажатии на кнопку button нужной формы запускаем функцию обработки данных
$('#contact_form .button').on('click', function() {
if (formValide()) {
//если форма прошла проверку, выводим блок с текстом ожидания
$('#contact_form').before('<h3 id="contact_form_info">Оформление заявки. Подождите...</h3>');
$('#contact_form').hide();
//берем путь php обработчика
order_url = $('#contact_form').attr('action');
//посылаем асинхронный запрос на сервер и передаем все данные формы
$.post(order_url,{
name: $('#contact_form input[name=name]').val(),
tel: $('#contact_form input[name=tel]').val(),
email: $('#contact_form input[name=email]').val(),
message: $('#contact_form textarea[name=message]').val(),
send: "1"
}, function(data) {
//выводим возврашаемый сервером код html вместо содержимого формы
$('#contact_form').html(data);
$('#contact_form').show();
$('#contact_form_info').remove();
}, "html");
}
return false;
});
});
// ========================================================================= go_order
$(function() {
//фкнкция вызова формы обратной связи
$('#callback').click(function(){
//появление окна обратной связи
$('#popup').fadeIn();
//добавляем к окну иконку закрытия
$('#popup').append('<a id="popup_close"></a>');
//расчитываем высоту и ширину всплывающего окна что бы вывести окно прямо по центру экрана
q_width = $('#popup').outerWidth()/-2;
q_height = $('#popup').outerHeight()/-2;
$('#popup').css({
'margin-left': q_width,
'margin-top': q_height
});
//выводим затемение страницы и делаем полупрозрачным
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=40)'}).fadeIn();
return false;
});
//функция закрытия окна
$('#popup_close, #fade').on('click', function() {
alert("Вы нажали крестик");
//$('#fade').fadeOut(function() {
// $('#fade').remove();
// $('#popup_close').remove();
// $('#popup').fadeOut();
//});
});
});
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Займы на обучение</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/callback.css">
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/list_drop.js"></script>
<script type="text/javascript" src="js/callback.js"></script>
</head>
<body class="main">
...
Версия jQuery: 1.12.4
