<?
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, должна скрываться по определению во всех версиях
})
}
|