var on = 0; /* служебная переменная следящая за состоянием окна: 0 - значит окно закрыто ; 1 - открыто */
/* ниже описана функция которая собственно позволяет окну появится из небытия */
function loadPopup() {
if(on == 0) {
/* если переменная состояния окна равняется нулю, изменяем свойства DIV фона с именем back, а именно: задаем прозрачность opacity индексом 0.6 - данный индекс может принимать значения от 0.1 до 1 - чем больше цифра, тем меньше прозрачность, следовательно - темнее фон back */
$("#back").css("opacity", "0.6");
/* fadeIn - один стандартных визуальных эффектов, переводится как Из затемнения, блок popup появляется быстрее, активация темного фона back происходит медленнее */
$("#popup").fadeIn(500);
$("#back").fadeIn(1500);
/* служебная переменная переходит в состояние 1 - окно открыто */
on = 1;
}
/* функция открытия окна завершена */
}
/* функция закрытия окна и возвращения нормального цвета фона */
function off() {
if(on == 1) {
/* убираем окно-блок DIV с именем класса css "popup" с помощью эффекта Затемнение fadeOut */
$("#popup").fadeOut("normal");
/* возвращаем фону исходное состояние, дезактивируем затемненный фон back */
$("#back").fadeOut("normal");
/* не забываем про служебную переменную , возвращаем ей значение ноль */
on = 0;
}
/* функция закрытия окна завершена */
}
/* при клике на фоне HTML страницы, вне самого окна, окно закрывается */
$("div#back").click(function() {
off();
});
/* закрыть окно при клике на блоке с классом "close", здесь у нас будет расположен крестик */
$("div.close").click(function() {
off();
});#popup {
/* само всплывающее окно , ширину и высоту Вы можете задать на свое усмотрение , но нет смысла задавать их слишком большими, иначе окно займет весь экран, кроме того следует обратить внимание на свойство margin-left отступ слева , чтобы окно находилось по центру экрана это свойство следует указывать из расчета ширина окна деленная на два плюс два пиксела , например для ширины окна 300px, margin-left будет равняться 152px */
display: none;
/*width: 700px;*/
height:250px;
z-index: 20;
position: fixed;
top: 25%;
left: 50%;
margin-left: -190px;
overflow-y:auto;
color: #000;
background-color: #fff;
border: 15px solid #ebeeee;
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 40px rgba(0, 0, 0, .3);
}
#back {
/* задний фон по умолчанию не виден, его цвет черный, он занимает всё пространство по высоте и ширине, его позиция фиксирована , то есть при скроллинге он никуда не денется */
display: none;
height:100%;
width:100%;
z-index:10;
position: fixed;
top:0px;
left:0px;
background:#000;
}
div.close {
/* блок с крестиком или ссылкой на закрытие окна */
position: absolute;
right: 8px;
top: 0px;
cursor: pointer;
color: red;
width:15px;
height:15px;
font-weight:bold;
}<div id="popup">
<div>Ваш заказ принят.
<br />В ближайшее время с Вами свяжется наш специалист.
</div>
<div class="close">[X]</div>
</div>
<div id="back"></div><?php
if (!empty($_POST)) {
$curl = curl_init(); //инициализация сеанса
curl_setopt($curl, CURLOPT_URL, 'https://'); //урл сайта к которому обращаемся
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
curl_setopt ($curl, CURLOPT_CAINFO, dirname(__FILE__)."/cacert.pem");
curl_setopt($curl, CURLOPT_HEADER, 0); //выводим заголовки
curl_setopt($curl, CURLOPT_POST, 1); //передача данных методом POST
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); //теперь curl вернет нам ответ, а не выведет
curl_setopt($curl, CURLOPT_POSTFIELDS, //тут переменные которые будут переданы методом POST
array (
'a'=>@$_POST['a'],
'b'=>@$_POST['b'],
'c'=>@$_POST['c'],
'd'=>@$_POST['d'],
'searchButton'=>'get' //это на случай если на сайте, к которому обращаемся проверяется была ли нажата кнопка submit, а не была ли оправлена форма
));
curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0'); //эта строчка как-бы говорит: "я не скрипт, я огнелис" :)
curl_setopt ($curl, CURLOPT_REFERER, "https://"); //а вдруг там проверяют наличие рефера
$res = curl_exec($curl);
//если ошибка то печатаем номер и сообщение
if(!$res) {
$error = curl_error($curl).'('.curl_errno($curl).')';
echo $error;
}
else {
header('Content-type: text/html');
$search = array('"[', '\"'); //говнокод
$replace = array('[', '"'); //говнокод
$replacePairs = array_combine($search, $replace);
echo strtr($res, $replacePairs);
curl_close($curl);
}
}
?>$('#to').on('submit', function() {
var e = $(this),
caption = $('button', e).html(),
loader = $('button', e).attr('data-loader');
$('button', e).attr('disabled', 'disabled').html(loader);
$(".tool_result", e).html('');
$.ajax({
type: "POST",
url: "./2.php",
dataType: 'json',
data: e.serialize(),
success: function(c) {
$('button', e).removeAttr('disabled').html(caption);
if(typeof c.err !== "undefined") {
$(".tool_result", e).html('<div class="message error mini">' + c.err + '</div>')
} else {
var d = ['1', '2', '3', '4', "5"],
res = '<table><thead><tr><th>' + d[0] + '</th><th>' + d[1] + '</th><th>' + d[2] + '</th><th>' + d[3] + '</th>';
if(c[0][5] != "") res += '<th>' + d[4] + '</th>';
res += '</tr></thead>';
$.each(c, function(a, b) {
res += '<tr><td data-label="' + d[0] + '">' + b[1] + '</td><td data-label="' + d[1] + '">' + b[3] + '</td><td data-label="' + d[2] + '">' + b[4] + '</td><td data-label="' + d[3] + '">' + b[2] + '</td>';
if(c[0][5] != "") res += '<td data-label="' + d[4] + '">' + b[5] + '</td>';
res += '</tr>'
});
res += "</table>";
$(".tool_result", e).html(res)
}
}
});
return !1
});<div id="too">
<form id="to" method="post" name="to">
<div class="fc">
<label>a</label>
<div class="wi">
<input type="text" id="a" name="a" placeholder="">
</div>
</div>
<div class="fc">
<label>b</label>
<div class="wi">
<input type="text" id="b" name="b" placeholder="">
</div>
</div>
<div class="fc">
<label>c</label>
<div class="wi">
<input type="text" id="c" name="c" placeholder="">
</div>
</div>
<div class="fc">
<label>d</label>
<div class="wi">
<input type="text" id="d" name="d" placeholder="">
</div>
</div>
<div class="wrap-btn"></div>
<button class="button" name="submit" data-loader="Проверка...">ПРОВЕРИТЬ</button>
<div class="wrap-btn"></div>
<div class="tool_result"></div>
</form>
</div>