Добрый день, сделал форму в index.html там она работает как надо, когда перенес ее в index.php (сайт с большим количеством кода) то она перестала работать.
Кнопка "заказать звонок" не работает, все остальные работаю
в чем может быть проблема ?
Прикрепленный файл site.zip - это форма+скрипт которые работают
Прикрепленный файл lan.loc.rar - это сайт где форма+скрипт которые работают( строки 2141-2166 скрипт, 2079-2090 форма)
Подскажите пожалуйста, очень нужно, уже все перепробовал что знал, идей не осталось и прошу помощи у Вас!
код index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A jQuery Countdown Timer | Easy-Code.ru Demo</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<style>
/*style POP-UP is here */
/*html {
min-height: 100%
}
body {
min-height: 100%;
background: #fff;
font: 14px/125% Tahoma;
}
p {
margin: 1em 0;
text-align: center;
}*/
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(119, 119, 119, 0.7);
text-align: center;
}
.popup__overlay:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.popup__overlay1 {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center;
}
.popup__overlay1:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.popup__overlay2 {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center;
}
.popup__overlay2:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.popup {
display: inline-block;
position: relative;
max-width: 80%;
width: 250px;
height: 170px;/* убрать*/
padding: 20px;
border: 5px solid #fff;
border-radius: 15px;
box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
background: #fff;
vertical-align: middle;
}
.popup-form__row {
margin: 1em 0
}
label {
display: inline-block;
width: 120px;
text-align: left
}
input[type="text"], input[type="password"] {
margin: 0;
padding: 2px;
border: 1px solid;
border-color: #999 #ccc #ccc;
border-radius: 2px;
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
cursor: pointer;
background: #444;
background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background: -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background: -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background: -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background: linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
color: #fff;
}
.popup__close {
display: block;
position: absolute;
top: -20px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border: 5px solid #fff;
border-radius: 50%;
-webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4),
0 3px 3px rgba(0,0,0,.4);
box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4),
0 3px 3px rgba(0,0,0,.4);
cursor: pointer;
background: #fff;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #444;
text-decoration: none;
font-weight: bold;
}
.popup__close:hover {
background: #ddd;
}
.input
.nice-form-row{margin-bottom:10px}
.nice-input-text{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:32px;font-size:12px;border:1px solid #d6d6d6;padding:3px 10px}
.nice-input_width-full{width:100%}
.phone{padding-bottom:62px;background:url(../popup/phone.png) center bottom no-repeat}
.nice-legend{font-size:30px;margin-bottom:20px; color: #000;}
.input-name:before{
content: url(popup/phone.png);
position: absolute;
margin-left: 5px;
margin-top: 8px;
width: 14px;
/* height: 16px;
margin-top: 27px;
margin-left: 30px;*/
}
</style>
<!--
Задание для человека хорошо владеющего JavaScript. Есть 3 кнопки, 2 из них через Pop-up выводят форму которая в блоке <div class="popup__overlay">, эти кнопки под названием "ЗАКАЗАТЬ" - их не трогаем, они работают как нам надо.Есть 3я кнопка под названием "заказать звонок",нужно что бы она выводила при нажатии Pop-up блок под названием <div class="popup__overlay2">.
Скрипт который сейчас стоит он может при нажатии 3й кнопки вывести только блок <div class="popup__overlay">. Прилагаю к заданию файлы.
После удачного сделанной работы проверю на index.php и если все ОК то оплачу. -->
<a style="z-index:4;" class="rollover" id="popup__toggle"><img src="images/button.png" ></a>
<a style="z-index:17;" class="rollover" id="popup__toggle1"><img src="images/button.png" ></a>
<a style="position:absolute;left:770px;top:35px;z-index:17;" class="rollover" id="popup__toggle2"><img src="images/button1.png" ></a> <!-- не работает -->
<div class="popup__overlay2">
<div class="popup">
<a href="#" class="popup__close">X</a>
<form name="request-form" method="post" action="<?php echo basename(__FILE__); ?>" enctype="multipart/form-data" accept-charset="UTF-8" >
<input type="text" id="Editbox2" style="position:absolute;left:46px;top:50px;width:191px;height:30px;line-height:30px;z-index:1;" name="Телефон" value="" required="required" placeholder="Введите телефон">
<div id="wb_Image3" style="position:absolute;left:22px;top:114px;width:238px;height:54px;z-index:2;">
<img src="images/button2.png" id="Image3" alt="" style="position:absolute;left:20px;top:-15px;width:208px;height:54px;"></div>
<div id="wb_Text7" style="position:absolute;left:0px;top:143px;width:232px;height:23px;text-align:center;z-index:3;"></div>
<input type="submit" id="jQueryButton1" name="" value="Button" style="position:absolute;left:40px;top:100px;width:207px;height:45px;z-index:4;">
</form>
</div>
</div>
<!-- call back НЕ РАБОТАЕТ -->
<!-- Работает -->
<div class="popup__overlay">
<div class="popup">
<a href="#" class="popup__close">X</a>
<form name="request-form" method="post" action="<?php echo basename(__FILE__); ?>" enctype="multipart/form-data" accept-charset="UTF-8" >
<input type="text" id="Editbox1" style="position:absolute;left:23px;top:49px;width:191px;height:30px;line-height:30px;z-index:0;" name="Имя" value="" required="required" placeholder="Введите имя">
<input type="text" id="Editbox2" style="position:absolute;left:23px;top:90px;width:191px;height:30px;line-height:30px;z-index:1;" name="Телефон" value="" required="required" placeholder="Введите телефон">
<div id="wb_Image3" style="position:absolute;left:22px;top:114px;width:238px;height:54px;z-index:2;">
<img src="images/button.png" id="Image3" alt="" style="position:absolute;left:0px;top:23px;width:208px;height:54px;"></div>
<div id="wb_Text7" style="position:absolute;left:0px;top:143px;width:232px;height:23px;text-align:center;z-index:3;"></div>
<input type="submit" id="jQueryButton1" name="" value="Button" style="position:absolute;left:24px;top:142px;width:207px;height:45px;z-index:4;">
</form>
</div>
</div>
<script type="text/javascript">
i = $('.popup__overlay')
$('#popup__toggle').click(function() {
i.css('display', 'block')
})
i.click(function(event) {
e = event || window.event
if (e.target == this) {
$(i).css('display', 'none')
}
})
$('.popup__close').click(function() {
i.css('display', 'none')
})
$('#popup__toggle1').click(function() {
i.css('display', 'block')
})
i.click(function(event) {
e = event || window.event
if (e.target == this) {
$(i).css('display', 'none')
}
})
$('.popup__close').click(function() {
i.css('display', 'none')
})
</script>
<!-- работает, конец -->
<script type="text/javascript">
ii = $('.popup__overlay2')
$('#popup__toggle2').click(function() {
ii.css('display', 'block')
})
ii.click(function(event) {
e = event || window.event
if (e.target == this) {
$(ii).css('display', 'none')
}
})
$('.popup__overlay2 .popup__close').click(function() {
ii.css('display', 'none')
})
$('#popup__toggle2').click(function() {
ii.css('display', 'block')
})
ii.click(function(event) {
e = event || window.event
if (e.target == this) {
$(ii).css('display', 'none')
}
})
$('.popup__overlay2 .popup__close').click(function() {
ii.css('display', 'none')
})
</script>
</body>
</html>