Спасибо gooseim. Нашел выход
http://jqueryui.com/
Только есть проблемка. Тыкаю на заказать звонок, появляется модальное окно с формой, заполняю ее, нажимаю отправить, появляется моя надпись "Спасибо", но модальное окно с формой не закрывается. Как сделать что бы при нажатии на кнопку отправить закрывалось модальное окно и появлялась надпись "Спасибо"?
Немного кода:
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
| $(document).ready(function() {
$("#form_callback").submit(function() {
$.ajax({
type: "POST",
url: "mail.php",
data: $(this).serialize()
}).done(function() {
$( "#res" ).addClass( "result2", 1000 );
});
return false;
});
}); |
|
Получилось. Сам додумался.
Если кому-то нужно, то делал вот так:
Кликните здесь для просмотра всего текста
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
| <!DOCTYPE html>
<html lang="en">
<head>
<style>
.result{
display: none;
}
.result2{
display: block;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
top:0px;
}
.thanks{
width: 300px;
margin: 0 auto;
background-color: #fff;
}
.thanks p{
font: 20px OpenSansRegular;
}
.form_hidden{
width: 300px;
height: 360px;
background-color: rgba(10,10,10,.8);
border-radius: 5px;
box-shadow: 0px 0px 6px rgba(255,255,255,0.7);
display: block;
text-align: center;
margin: 0 auto;
position: relative;
}
.form_hidden p{
font: 14px OpenSansRegular;
color: #10F1FF;
padding: 25px 10px;
}
.form_hidden input {
background-color: rgba(0,0,0,.0);
border: none;
border-bottom: 2px solid #fff;
padding: 10px 10px;
margin: 20px 15px;
}
.form_hidden input:focus{
background-color: rgba(255,255,255,1);
outline:none;
border-radius: 5px;
transition: 0.8s;
color: #000;
}
.modal_text{
text-align: center;
padding: 5px 20px 25px;
font: 23px OpenSansRegular;
text-transform: uppercase;
color: #000;
width: 279px;
margin: 10px auto 2px;
}
.modal_text2{
text-align: center;
font: 17px OpenSansRegular;
text-transform: uppercase;
color: #000;
margin: 0 auto 35px;
width: 272px;
}
.header{
width: 100%;
height: 69px;
text-align: center;
}
.h_wrap{
width: 960px;
height: 60px;
margin: 0 auto;
padding: 3px;
}
/*.h_wrap ul>li{
float: left;
padding: 0 15px
}
.h_wrap ul{
width: 960px;
height: 60px;
margin: 0 auto;
}*/
.logo{
width: 150px;
height: 42px;
margin-top: 10px;
display: inline-block;
}
.logo img{
width: 150px;
margin-bottom: 12px;
}
.navigation{
width: 500px;
display: inline-block;
position: relative;
top: -28px;
}
.navigation a{
padding: 0 10px;
text-transform: uppercase;
font: 16px OpenSansRegular;
text-decoration: none;
color: #8B8B8B;
height: 30px;
display: inline-block;
}
.navigation a:hover{
border-bottom: 2px solid;
}
.h_phone{
width: 278px;
height: 58px;
font: 12px OpenSansRegular, sans-serif;
color: #000;
display: inline-block;
position: relative;
top: -9px;
}
.h_p_text1{
font: 12px OpenSansRegular;
}
.h_p_text2{
font: 16px OpenSansRegular;
font-weight: bold;
}
.h_p_text2 span{
color: #f00;
font: 14px OpenSansRegular;
}
.h_p_callback{
font: 14px OpenSansRegular;
text-decoration: none;
color: #000;
}
.h_p_callback:hover{
border-bottom: 1px solid;
}
.hidden{
display: none;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/magnific-popup.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="common.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
</head>
<body>
<div class="header">
<div class="h_wrap">
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
<div class="navigation">
<a href="#">Услуги</a>
<a href="#">Портфолио</a>
<a href="#">Отзывы</a>
<a href="#">Контакты</a>
</div>
<div class="h_phone">
<p class="h_p_text1">Ежедневно с 8:00 до 20:00</p>
<p class="h_p_text2">+7<span>(8452)</span>-25-29-85; +7<span>(8452)</span>-25-45-00</p>
<a href="#form_callback" class="h_p_callback popup">Заказать звонок</a>
</div>
</div>
</div>
<div class="result" id="res">
<div class="thanks">
<p class="modal_text">Спасибо</p>
<p class="modal_text2">Ваша заявка отправлена. Мы свяжемся с вами в ближайшее время.</p>
</div>
</div>
<div class="hidden">
<form action="" class="form_hidden" id="form_callback">
<p>Закажите обратный звонок и мы свяжемся с вами в ближайшее время.</p>
<input type="text" name="name" placeholder="Ваше имя" required="" />
<input type="text" name="phone" placeholder="Контактный телефон" required="" class="phone" /><br>
<button class="f_cb_button">Расчитать стоимость</button>
</form>
</div>
</body>
</html> |
|
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $(document).ready(function() {
$("#form_callback").submit(function() {
$.ajax({
type: "POST",
url: "mail.php",
data: $(this).serialize()
}).done(function() {
$( "#res" ).addClass( "result2" );
$.magnificPopup.close();
$( "#form_callback" ).addClass( "result3" );
});
return false;
});
});
$(document).ready(function() {
$(".popup") .magnificPopup();
}); |
|
(
