Цитата:
|
maxg5, я могу и ошибаться, так что лучше глянуть API, но содержимое его можно подгружать ajax запросом, типа
$('селектор').fancybox({
type: 'ajax',
ajax : {
type : "POST",
data : данные
}
});
Загрузив таким образом форму, после отправления которой, закрыть окно, к которому доступ проще будет. |
С API FancyBox я не разберусь.
Можете дать пример кода пожалуйста на модальное c формой бех без использования FancyBox. Мне нужно в обще две формы сделать. 1. Форма в модальном окне. Что бы окно зарвалось после успешной отправки. 2. И форма после отправки которой модальное окно появляется через 3с и исчезает. Ищу примеры, не могу найти. |
Цитата:
|
Цитата:
|
Опечатка была:
форма после отправки которой модальное окно появляется НА 3 секунды и исчезает |
Цитата:
2) Если после отправления формы, должно появится окно на N сек, то форма также из окна отправляется, а окно после отправки, это сообщение результата отправления? |
Цитата:
2. окно на N секунд должно появляться только для второй формы. Окно после отправки, это сообщение результата отправления формы. |
<?
if($_POST) {
if(isset($_POST['sleep'])) sleep(3);
exit(print_r($_POST, 1));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(function() {
$(".modalbox").fancybox({
padding: 20,
frameWidth: 400,
frameHeight: 300,
overlayOpacity: 0.7
});
$('#feedback').submit(function(e) {
var f = $(this);
e.preventDefault();
$.ajax({
type: 'post',
url: location,
data: f.serialize(),
success: function(d) {
$('pre').text(d);
$.fancybox.close(); //закрывается только после ответа
}
})
});
$('#feed_message').submit(function(e) {
var f = $(this);
e.preventDefault();
$.ajax({
type: 'post',
url: location,
data: f.serialize(),
success: function(d) {
//показать сообщение
$.fancybox.open({
content: '<p>Done!</p>',
afterShow: function() {
$(this.skin[0]).find('a.fancybox-close').hide();
var tm = setTimeout(function() {
//скрыть сообщение
$.fancybox.close();
clearTimeout(tm)
}, 3000)
}
})
}
})
});
});
</script>
</head>
<body>
<div>
<p><a href="#feedback" class="modalbox">Sender</a></p>
<div style="display: none;">
<h2>Send form</h2>
<form id="feedback">
<input name="name" value="as"><br>
<input name="email" value="as@as.as"><br>
<input type="hidden" name="sleep" value="1" />
<button>Send</button>
</form>
</div>
</div>
<pre>
</pre>
<div>
<p>Message</p>
<form id="feed_message">
<input name="name" value="as"><br>
<input name="email" value="as@as.as"><br>
<button>Send</button>
</form>
</div>
</body>
</html>
Спрятать кнопку close можно опционально (только опция closeBtn у другой версии может отличаться, то есть ее имя), и если сообщение формирует сервер, значит его определять в опциях:
success: function(data) {
$.fancybox.open({
content: data,
afterShow: function() {
var tm = setTimeout(function() {
$.fancybox.close();
clearTimeout(tm)
}, 3000)
},
closeBtn: false //или modal: true, должна скрываться по определению во всех версиях
})
}
|
Цитата:
Применил Ваш код к своему сайту. Но у меня почему то в модальном окне, при нажатии на кнопку Отправить окно закрывается и все. Должно выдаться сообщение в этом же модальном окне(Где нибудь под кнопкой отправить) Ваша заявка отправлена. И через 3 секунды окно закрыться должно. php добавил тот что я выше показывал. В чем может быть проблема? Вот сайт. Модальное окно прикручено к кнопке Онлайн заявка только в шапке под номером которая. |
| Часовой пояс GMT +3, время: 17:58. |