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

Нам потребуется небольшая правка скрипта, установленного в 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

silver073000Василий 10 май 2013, 21:06 Сообщение

Я так понял, это для prosilver`a. А есть для subsilver`a?
  • 0

CabinetAdmin 11 май 2013, 06:15 Сообщение

BOJIK писал(а):для subsilver`a?
Можно попробовать в overall_header.html в начале скрипта:

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

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
	return false;
}
Поставить замену вместо или под ней, а её закомментировать:

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

popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
Правда не знаю будет работать или нет.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 11 май 2013, 10:16 Сообщение

Сейчас попробую :) О результате отпишусь :)
  • 0

silver073000Василий 11 май 2013, 12:52 Сообщение

К сожалению, не заработало :( Пробовал оба варианта замены - не работают.
  • 0

silver073000Василий 11 май 2013, 15:50 Сообщение

А такой вопрос. В этой части кода вместо решётки не должно быть какой-то ссылки?

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

class='close_win'><a href='#' class='close'
Может, в этом вся проблема?
  • 0

CabinetAdmin 11 май 2013, 16:21 Сообщение

Это кнопка для закрытия окна и закрывается она с помощью скрипта, чуть далее:

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

onClick='$(\"#form_popuppm\").hide()' title='{L_CLOSE_WINDOW}'
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 11 май 2013, 17:12 Сообщение

BOJIK писал(а):К сожалению, не заработало
Поставьте перед редактируемым скритом:

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

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
   if ({S_NEW_PM})
   {
Библиотеку jQuery:

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Должно работать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 11 май 2013, 20:54 Сообщение

Библиотека подключена, но не работает это уведомление :( Перебрал много библиотек, сейчас подключена эта:

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Результата нет.
  • 0

CabinetAdmin 11 май 2013, 20:58 Сообщение

Перед скриптом подключена?

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

silver073000Василий 11 май 2013, 21:54 Сообщение

Вот у меня как

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

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
          $(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 -->
И плюс добавка в теме стиля

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

    /* 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("http://cabinetadmina.ru/storage/up_4admins_ru/images/popuppm-before.png");
       width: 530px;
       height: 316px;
    }
       
    #form_popuppm:after {
       content:"";
       position: absolute;
       bottom: 0px;
       left: 0;
       background:url("http://cabinetadmina.ru/storage/up_4admins_ru/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("http://cabinetadmina.ru/storage/up_4admins_ru/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;
    }
Всё правильно? А сколько по времени держится это окно перед закрытием?
  • 0

CabinetAdmin 12 май 2013, 06:52 Сообщение

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

silver073000Василий 14 июн 2013, 13:32 Сообщение

Немного забросил я идею встроить это сообщение о новом ЛС из-за занятости. Сейчас хочу попробовать всё-таки встроить его.
Вот мой overall_header
+overall_header
Может, в нём что-то с чем-то конфликтует? Явных признаков конфликтов не было замечено. Нигде ничего не покосилось, по бокам не съезжает.
  • 0

CabinetAdmin 14 июн 2013, 14:36 Сообщение

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

<script type="text/javascript" src="http://gff.5nx.org/images/ranks2/gff_5nx_org/postlink.js"></script>
Единственное что бросилось в глаза, это Постлинк, это чтобы ссылки в новом окне открывались. Насколько помню он не работает вместе с jQuery. Может быть из-за него... Можно на время удалить его и проверить работает или нет, либо вообще от него отказаться, а за вместо него в самое начало футера поставить:

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

<script type="text/javascript">
$('a.postlink').attr('target','_blank');
</script>
Ссылки так же как и раньше будут открываться в новом окне.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 14 июн 2013, 15:04 Сообщение

Премного благодарен за советы :drink: Всё заработало должным образом :Yahoo!:
  • 0