По умолчанию сообщение о новом личном сообщение показывается в всплывающем окне и обычно эта функция в браузере заблокирована.
Можно конечно советовать всем пользователям разрешать в браузере показ всплывающих окон с вашего сайта, а можно пойти другим путём, сделать сообщение в модальном окне.

Нам потребуется небольшая правка скрипта, установленного в overall_header.html и CSS оформление модального окна.

Шаблон overall_header.html, ищем:

Код: Выделить всё

<script type="text/javascript">
// <![CDATA[
   var jump_page = '{LA_JUMP_PAGE}:';
   var on_page = '{ON_PAGE}';
   var per_page = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';
   var style_cookie = 'phpBBstyle';
   var style_cookie_settings = '{A_COOKIE_SETTINGS}';
   var onload_functions = new Array();
   var onunload_functions = new Array();

   <!-- IF S_USER_PM_POPUP -->
      if ({S_NEW_PM})
      {
         var url = '{UA_POPUP_PM}';
         window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
Перед найденным ставим библиотеку jQuery:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Если у вас уже установлена библиотека, то можно не ставить.

Две последних строки комментируем или удаляем

Код: Выделить всё

         //var url = '{UA_POPUP_PM}';
         //window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
Вместо них, или после них, ставим:

Код: Выделить всё

          $(document).ready(function() {
           $("body").append("<div id='form_popuppm'><div class='jq_popuppm'><p class='close_win'><a href='#' class='close' onClick='$(\"#form_popuppm\").hide()' title='{L_CLOSE_WINDOW}'>[x]</a></p><p class='new_message'>{L_NEW_MESSAGE}</p><p class='click_view'><a href='ucp.php?i=pm&folder=inbox' class='view' title='{L_GO}'>{L_GO}</a></p><cite>http://cabinetadmina.ru/</cite></div></div>");
         $("#form_popuppm").hide();
           $("#form_popuppm").show(1000);
          });
Открываем тему стиля, в самый конец добавляем CSS нашего модального окна. Модальное окно в виде конверта:

Код: Выделить всё

/* Popup PM */
#form_popuppm { 
	overflow: hidden; 
	width: 530px;
	height: 446px; 
	position: fixed; 
	top: 0px;
	left: 0;
	-webkit-transition: all 1s ease-in-out .3s;
	-moz-transition: all 1s ease-in-out .3s;
	-o-transition: all 1s ease-in-out .3s;
	transition: all 1s ease-in-out .3s;
}
    
#form_popuppm:before {
	content:"";
	position: absolute;
	bottom: 128px;
	left: 0px;
	background: url("./images/popuppm-before.png");
	width: 530px;
	height: 316px;
}
    
#form_popuppm:after {
	content:"";
	position: absolute;
	bottom: 0px;
	left: 0;
	background:url("./images/popuppm-after.png");
	width: 530px;
	height: 260px; 
}

#form_popuppm.hide:after, #form_popuppm.hide:before {
	display: none; 
}

#form_popuppm:hover {
	height: 576px;
	top: -100px;
}

.jq_popuppm {
	background: url("./images/popuppm-letter_bg.png") repeat 0 0 #f7f2ec; 
	position: relative;
	top: 200px;
	overflow: hidden;
	height: 200px;
	width: 400px;
	margin: 0px auto;
	padding: 20px; 
	border: 1px solid #fff;
	border-radius: 3px; 
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
	box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
	-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-webkit-transition: all 1s ease-in-out .3s;
	-moz-transition: all 1s ease-in-out .3s;
	-o-transition: all 1s ease-in-out .3s;
	transition: all 1s ease-in-out .3s;
}

#form_popuppm:hover .jq_popuppm {
	height: 330px;
}

.jq_popuppm p.close_win {
	text-align: right;
}

.jq_popuppm a.close {
	font-size: 10px;
}

.jq_popuppm p.click_view {
	text-align: center;
}

.jq_popuppm a.view {
	font-size: 13px;
}

.jq_popuppm p.new_message {
	margin-top: 20px;
	text-align: center;
	font-size: 1.3em;
}

.jq_popuppm cite {
	font-size: 12px;
	text-align: center;
	display: block;
	margin-top: 100px;
}
Получаем:
Файлы:
Конверт.rar
220.15 КБ 462 скачивания

Ещё один вариант стильного отображения окна.
Замена в скрипте:

Код: Выделить всё

          $(document).ready(function() {
           $("body").append("<div id='form_popuppm'><h1>{L_MESSAGE}</h1><a href='#' class='close' onClick='$(\"#form_popuppm\").hide()' title='{L_CLOSE_WINDOW}'>[x]</a><p>{L_NEW_MESSAGE}</p><a href='ucp.php?i=pm&folder=inbox' class='view' title='{L_GO}'>{L_GO}</a><cite>http://cabinetadmina.ru/</cite></div>");
         $("#form_popuppm").hide();
           $("#form_popuppm").show(1000);
          });
CSS:

Код: Выделить всё

/* Popup PM */
#form_popuppm h1 {
	font-family: Verdana, sans-serif;
	text-align: center;
	font-size: 30px;
	padding: 0;
	margin: 0 0 20px 0;
	position: relative;
	color: #8C8C8C;
}

#form_popuppm h1:after {
	font-size: 25px;
	color: #D6CFCB;
	content: '&'; 
	text-align: center;
	display: block;
	width: 100%;
	font-family: Verdana, serif;
	text-shadow: 0px 1px 0px #fff;
}

#form_popuppm h1:before {
	position: absolute;
	bottom: 15px;
	content: ' '; 
	text-align: center;
	display: block;
	height: 2px;
	width: 100%;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(182,180,180,0.7) 42%, rgba(180,178,178,0) 43%, rgba(168,166,166,0) 50%, rgba(180,178,178,0) 57%, rgba(182,180,180,0.7) 58%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(182,180,180,0.7)), color-stop(43%,rgba(180,178,178,0)), color-stop(50%,rgba(168,166,166,0)), color-stop(57%,rgba(180,178,178,0)), color-stop(58%,rgba(182,180,180,0.7)), color-stop(90%,rgba(238,237,237,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */

}
 
#form_popuppm {
	position: fixed;
	top: 50px;
	left: 50px;
	width: 400px;
	min-height: 200px;
	z-index: 100;
	padding: 30px;
	border: 1px solid #383838;
	color: #7F7E7E;
	font-size: 15px;
    
	background: #D1D1D1; /* Old browsers */
	background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
	background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
	background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
	background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */

	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	-webkit-box-shadow: 0px 1px 6px #3F3F3F;
	-moz-box-shadow: 0px 1px 6px #3F3F3F;
	box-shadow: 0px 1px 6px #3F3F3F;
}

#form_popuppm:after {
	background: #F9F9F9;
	margin: 10px;
	position: absolute;
	content : " ";
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1; 
	border: 1px #E5E5E5 solid;       

	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

#form_popuppm a.view {
	margin-left: 300px;
	cursor: pointer;
	background: none;
	border: none;
	font-family: Georgia;
	color: #767676;
	font-size: 18px;
	padding: 10px 15px;
	border: 1px solid #E0E0E0;
	text-shadow: 0px 1px  1px #E8E8E8;
	background: rgb(247,247,247);
	background: -moz-linear-gradient(top,  rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
	background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
	background: -o-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
	background: -ms-linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
	background: linear-gradient(top,  rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
	-moz-box-shadow: 0px 1px 1px #FFF inset,	0 0 0px 5px #EAEAEA;
	box-shadow: 0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;

	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#form_popuppm a.view:hover{
	color: #686868;
	text-decoration: none;
	border-color: #CECECE;
	background: rgb(244,244,244);
	background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(242,242,242,1)));
	background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
	background: -o-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
	background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
	background: linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);

	-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
	-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
	box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;        
}

#form_popuppm a.view:active,
#form_popuppm a.view:focus{
	position: relative;
	top: 1px;
	color: #515151;
	background: rgb(234,234,234);
	background: -moz-linear-gradient(top,  rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(242,242,242,1)));
	background: -webkit-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
	background: -o-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
	background: -ms-linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
	background: linear-gradient(top,  rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);

	-webkit-box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
	-moz-box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
	box-shadow: 0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}

#form_popuppm a.close {
	right: 15px;
	position: absolute;
	top: 15px;
	font-size: 15px;
	color: #7F7E7E;
}

#form_popuppm cite {
	font-size: 13px;
	position: absolute;
	bottom: 10px;
	left: 30px;
}
Получаем:

Для оформления наших окон используется CSS3, псевдоэлементы :before и :after, градиенты, тени и многое другое. Поэтому правильно отображаться окна будут только в современных браузерах.
Комментарии: 40

CabinetAdmin 29 ноя 2015, 18:42 Сообщение

Не должно работать, получается что функция скрипта не открыта и не закрыта...

Вот кусок кода с кабинета админа трёх летней давности, 100% работавший:

Код: Выделить всё

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			//var url = '{UA_POPUP_PM}';
			//window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
			$(document).ready(function() {
				$("body").append("<div id='form_popuppm'><div class='jq_popuppm'><p class='close_win'><a href='#' class='close' onClick='$(\"#form_popuppm\").hide()' title='{L_CLOSE_WINDOW}'>[x]</a></p><p class='new_message'>{L_NEW_MESSAGE}</p><p class='click_view'><a href='ucp.php?i=pm&folder=inbox' class='view' title='{L_GO}'>{L_GO}</a></p><cite>http://cabinetadmina.ru/</cite></div></div>");
				$("#form_popuppm").hide();
				$("#form_popuppm").show(1000);
			});
		}
	<!-- ENDIF -->
Вместе со скобками. Правда у меня на тот момент была более старая версия jquery.
А на втором форуме та же версия jquery, что и на этом? Плюс могут быть конфликты с другими скриптами... На каком форуме не работает, на том что в профиле?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

АрианАндрей 29 ноя 2015, 19:22 Сообщение

Наверное, у меня руки кривые, ибо работает без скобок именно на том форуме, что в профиле.
А вот второй форум http://strastoterptsy.ru сделан был ещё на myfor.ru который прекратил поддержку. Там я даже стиль по умолчанию не могу новый включить без деактивации старого. Т.е. звёздочка стоит на одном стиле, а для гостей показывает другой.
Скрипты практически одинаковые. На проблемном форуме даже меньше. Различие - есть информер погоды от Фобос. Но он прописан в index_body.
  • 0

CabinetAdmin 29 ноя 2015, 20:55 Сообщение

Хм, я вижу стиль 610nm, если смотреть скрипты, то в нём нет jquery библиотеки. Допустим что в другом стиле есть, но в этом стиле так же есть скрипт postlink.js, если он есть и в другом стиле, то это именно он мешает jquery скрипту работать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

АрианАндрей 29 ноя 2015, 21:34 Сообщение

Об этом я прочитал чуть ранее. Этого скрипта в новом стиле нет. Последовал вашему совету и вставил в футер рекомендуемый код. Сейчас ещё раз перепроверил наличие хедере этого скрипта. Нет его.
  • 0

silver073000Василий 29 ноя 2015, 21:41 Сообщение

Вот же он :)

Код: Выделить всё

<script type="text/javascript" src="http://strastoterptsy.myfor.ru/storage/strastoterptsy_myfor_ru/images/postlink.js"></script>
Стоит в overall_header.html перед meta-тегами.
  • 0

АрианАндрей 29 ноя 2015, 21:48 Сообщение

silver073000, это вы смотрите стиль по умолчанию. Я сейчас работаю с новым стилем для форума. Там нет этого скрипта. Пользоваться ctrl+f я ещё не разучился. :)

На всякий случай удалил и в этом стиле данный скрипт. Безрезультатно. :(
  • 0

CabinetAdmin 30 ноя 2015, 17:38 Сообщение

Ладно, хорошо. А в личных настройках (в личном разделе) в графе Всплывающее окно при получении личного сообщения стоит Да?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

АрианАндрей 09 дек 2015, 16:13 Сообщение

Проверил в обоих вариантах. Не заработало.
  • 0

CabinetAdmin 09 дек 2015, 16:50 Сообщение

Стоит да, но окно не появляется?

зы. Есть тестовый аккаунт?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

АрианАндрей 09 дек 2015, 18:30 Сообщение

У меня два аккаунта. На одном стоит ДА, на другом НЕТ. Шлю письма с одного на другой и обратно, конверт не прилетает ни туда, ни сюда. Тестового аккаунта нет.
  • 0

АрианАндрей 01 янв 2016, 19:12 Сообщение

Прошёл почти месяц. И о, чудо. Сегодня прилетел конверт при полном моём бездействии. :%)
  • 0