Скрипт отправки ссылки на страницу, где нажали на определенную ссылку, модальное окно

Віталий

11 років ago

Доброго времени суток.
Недавно столкнулся с такой задачей от заказчика. Я создал ему шаблон "онлайн кинотеатр на WordPress" и он захотел добавить такую кнопку, которая бы сообщала о неработающем фильме. Чтобы ничего вводить не нужно было бы, просто нажать, после чего бы администратору отправлялось письмо с темой, адресом страницы и сообщением "не работает видео".

Решено было сделать так. Под плеером кнопка "сообщит о неработающем видео", после нажатия выскакивает окошко(модальное окно), в котором текст - " Чтобы сообщить нам, нажмите на кнопу ниже. Спасибо за вашу помощь!" и кнопка сообщить, после чего страница перезагружалась и все. Идея с окошком нужна для того, чтобы пользователь не нажимал 10 раз подряд на кнопку, думая что ничего не произошло.
Итак приступим.

1. Скрипт отправки письма.

создаем файл report.php и вставляем в него скрипт.
Сам скрипт выглядит так:

<?php
$to = 'ваша почта@ящик.ru';
$header = "From: \"Имя от кого\" <почта@ящик.ru>";
$header = "Content-type: text/plain; charset=\"utf-8\"";
$subject = 'На сайте не работает видео.';
$page = $_SERVER['HTTP_REFERER'];
$message = wordwrap('Ошибка на странице: ' . $page, 70);

mail($to, $subject, $message, $header );
 
header('Location:'.$page);
exit;?>

В скрипте нужно указать e-mail на который будет отправлено письмо, тему, отправителя(я ставил название сайта)

2. Вывод ссылки(кнопки) на странице записи.

В нужное место вставляем html код, который выглядит так

<a href="#openModal" class="info">Не работает плеер, сообщить!</a>

Кнопке можно задать стили css для корректного отображения.

.info{
	padding:6px 10px;
	color:#fff;
	font-size: 19px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	background: #ff0000; 
}

Далее нужно организовать модальное окно, которое будет появляться после нажатия на ссылку(кнопку).

2. Модальное окно с кнопкой отправки

Ниже под ссылкой вставляем следующий код, отвечающий за появление модального окна. в котором будет текст и кнопка отправки ссылки, обращающаяся к файлу report.php

<div id="openModal" class="modalDialog">
   <div>
      <a href="#close" title="Close" class="close">X</a>
	  <div id="send_info">
	  Чтобы сообщить нам, нажмите на кнопу ниже. Спасибо за вашу помощь! 
<a class="info" href="<?php bloginfo('template_url'); ?>/report.php">Сообщить</a>
	</div>
</div>

Путь в ссылке на файл raport.php оформлен для WordPress. Если вы используете с другую cms то укажите корректный путь.

Теперь нужно задать стили css для корректного отображения окна:

/*Оформление*/
.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;
 -webkit-transition: opacity 400ms ease-in;
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 display: none;
}
/*Открытие*/
.modalDialog:target {
 display: block;
 pointer-events: auto;
}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 15% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: #333333;
  border: 2px solid #ff3333;
}
/*Закрытие окна*/
.close1 {
 background: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #ff9933; }
/*текст и положение кнопки*/
#send_info{
 color:#ffffff;
 font-size: 16px;
 text-align:center;
 }
#send_info a{
  margin-top:15px;
  }

Если все сделано правильно, после нажатия на кнопку в окне, на вашу почту отправится письмо с ссылкой на ту страницу где была нажата кнопка.

Также что-бы избавить себя от перехода поисковиков, в файл robot.txt нужно прописать свойство Disallow: и путь к файлу report.php. Для wordpress это выглядит так Disallow: /wp-content/themes/ваша_тема/report.php "ваша_тема" - заменить на корректное название темы

На этом все. Спасибо за внимание 🙂

Exit mobile version