Доброе времени суток.
Я пользую модальный окно jQuery плагин fancybox. Пример сайта
http://xozblog.ru/2012/11/modal-windows/. Очень хороший модальный окно из которых я увидел.
index.html
| 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
| <!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Модальное окно на jQuery | XoZblog</title>
<meta name="author" content="Jake Rocheleau">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="css/header.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
</head>
<body>
<header>
<p>Модальное окно на jQuery <a href="http://xozblog.ru/2012/11/modal-windows/" class="stuts">Перейти к статье на<span>XoZblog.ru</span></a></p>
</header>
<div id="wrapper">
<p>Чтобы отправить сообщение кликните по ссылке ниже.</p>
<p><a class="modalbox" href="#inline">Отправить сообщение</a></p>
</div>
<!-- hidden inline form -->
<div id="inline">
<h2>Отправка сообщения</h2>
<form id="contact" name="contact" action="#" method="post">
<label for="email">Ваш E-mail</label>
<input type="email" id="email" name="email" class="txt">
<br>
<label for="msg">Введите сообщение</label>
<textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Отправить E-mail</button>
</form>
</div>
<!-- basic fancybox setup -->
<script type="text/javascript">
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
$(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
$("#email").removeClass("error");
}
if(msglen < 4) {
$("#msg").addClass("error");
}
else if(msglen >= 4){
$("#msg").removeClass("error");
}
if(mailvalid == true && msglen >= 4) {
// если обе проверки пройдены
// сначала мы скрываем кнопку отправки
$("#send").replaceWith("<em>отправка...</em>");
$.ajax({
type: 'POST',
url: 'sendmessage.php',
data: $("#contact").serialize(),
success: function(data) {
if(data == "true") {
$("#contact").fadeOut("fast", function(){
$(this).before("<p><strong>Успешно! Ваше сообщение отправлено :)</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
}
}
});
}
});
});
</script>
</body>
</html> |
|
sendmessage.php
| PHP |
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
| <?php
$sendto = "email@mail.ru";
$usermail = $_POST['email'];
$content = nl2br($_POST['msg']);
// Формирование заголовка письма
$subject = "Новое сообщение";
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
// Формирование тела письма
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Новое сообщение</h2>\r\n";
$msg .= "<p><strong>От кого:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";
$msg .= "</body></html>";
// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
echo "true";
} else {
echo "false";
}
?> |
|
Проблема в том что я не хочу загрузить контейнер div внутри модальный окно, а отдельный php файл. Пробовал вот таким образом, нет результат:
| HTML5 |
1
| <p><a class="modalbox" href="inline.php">Отправить сообщение</a></p> |
|
Помогите мне пожалуйста для решение этой задачи. Спасибо!
(
