Уведомление о новом ЛС в виде конверта на jQuery.

[elhouse]

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

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

Открываем шаблон 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(/&amp;/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></cite></div></div>");
             $("#form_popuppm").hide();
               $("#form_popuppm").show(1000);
              });

Открываем тему стиля common.css, в самый конец добавляем 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;
    }

Получаем:

lc.png

modal.png

Файлы конверта:

images.zip

[Alex39]

Привет, прошу помощи, не получается поставить,вроде все просто, но не работает, прописал все, и начинаю в личном сообщении добавлять пользователя, кому хочу написать, и выскакивает письмо сразу, пользователь не добовляется, что не так?

[elhouse]

Выложите ваш overall_header.html - посмотрю.
И ссылку на форум.
Скорее всего дело в ваших скриптах....

[Alex39]

Сайт стоит пока что на компе, Для просмотра ссылки необходимо зарегистрироваться!

► Показать спойлер

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<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})
{
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
}
<!-- ENDIF -->

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

//window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
//return false;

$(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></cite></div></div>");
$("#form_popuppm").hide();
$("#form_popuppm").show(1000);
});




}

function jumpto()
{
var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
var perpage = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';

if (page !== null && !isNaN(page) && page > 0)
{
document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * perpage);
}
}

/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
var parent = document.getElementById(id);
if (!parent)
{
eval('parent = document.' + id);
}

if (!parent)
{
return;
}

var rb = parent.getElementsByTagName('input');

for (var r = 0; r < rb.length; r++)
{
if (rb[r].name.substr(0, name.length) == name)
{
rb[r].checked = state;
}
}
}

<!-- IF ._file -->

/**
* Play quicktime file by determining it's width/height
* from the displayed rectangle area
*
* Only defined if there is a file block present.
*/
function play_qt_file(obj)
{
var rectangle = obj.GetRectangle();

if (rectangle)
{
rectangle = rectangle.split(',')
var x1 = parseInt(rectangle[0]);
var x2 = parseInt(rectangle[2]);
var y1 = parseInt(rectangle[1]);
var y2 = parseInt(rectangle[3]);

var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
}
else
{
var width = 200;
var height = 0;
}

obj.width = width;
obj.height = height + 16;

obj.SetControllerVisible(true);

obj.Play();
}
<!-- ENDIF -->

// ]]>
</script>
</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">

<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
</tr>
</table>
</div>

<div id="menubar">
<table width="100%" cellspacing="0">
<tr>
<td class="genmed">
<!-- IF not S_IS_BOT --><a class="link02" href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="{L_LOGIN_LOGOUT}" /> </a><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a class="link02" href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="{L_RESTORE_PERMISSIONS}" /> </a><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --> &nbsp;<a class="link02" href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="{L_MESSAGES}" /> </a><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
<!-- ELSEIF S_REGISTER_ENABLED --> &nbsp;<a class="link02" href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="{L_REGISTER}" /> </a><a href="{U_REGISTER}">{L_REGISTER}</a>
<!-- ENDIF -->
<!-- ENDIF -->
</td>
<td class="genmed" align="{S_CONTENT_FLOW_END}">
<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /></a> <a href="{U_FAQ}">{L_FAQ}</a>
<!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> </a><a href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> </a><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> </a><a href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF -->
<!-- ENDIF -->
</td>
</tr>
</table>
</div>

<div id="datebar">
<table width="100%" cellspacing="0">
<tr>
<td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
<td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
</tr>
</table>
</div>

</div>

<div id="wrapcentre">

<table class="tablebg" width="100%" cellspacing="1" cellpadding="0" style="margin-top: 5px;">
<tr>
<td class="row1">
<div class="breadcrumbs"><a href="{U_INDEX}">{L_INDEX}</a><!-- BEGIN navlinks --> &#187; <a

href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></div>
<div class="searchbar">
<!-- IF S_DISPLAY_SEARCH -->
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> &nbsp; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a> &nbsp;
<!-- IF S_USER_LOGGED_IN -->
<a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> &nbsp; <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- ENDIF -->
<!-- ENDIF -->
</div>
</td>
</tr>
</table>
<br />

[elhouse]

У Вас стоят оба кода - старый и новый.
Старый нужно удалить.

Должен остаться только этот код.

Это мой:

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

   <!-- IF S_USER_PM_POPUP and 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://www.ваш сайт.ru/</cite></div></div>");
             $("#form_popuppm").hide();
               $("#form_popuppm").show(1000);
              });
   <!-- ENDIF -->

[Alex39]

Не совсем понял, там нет двух кодов, и я сравнил Ваш со своим, они совершенно идентичны, что то я ничего не понял

[elhouse]

Это весь скрипт:

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

<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 and 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'><b>Вам пришло новое личное сообщение!</b></p><p class='click_view'><b><a href='ucp.php?i=pm&folder=inbox' class='view' title='{L_GO}'>{L_GO}</a></b></p><br /><p style='font-size: 1.2em; text-align: center'>{PRIVATE_MESSAGE_INFO}</p><cite></cite></div></div>");
             $("#form_popuppm").hide();
               $("#form_popuppm").show(1000);
              });
   <!-- ENDIF -->

   <!-- IF S_BIRTHDAY_POPUP -->

         var url = '{UA_POPUP_BIRTHDAY}';
         window.open(url.replace(/&amp;/g, '&'), '_phpbbbdpopup', 'height=225,resizable=yes,scrollbars=yes, width=400');

   <!-- ENDIF -->

   /**
   * Find a member
   */
   function find_username(url)
   {
      popup(url, 760, 570, '_usersearch');
      return false;
   }

   /**
   * New function for handling multiple calls to window.onload and window.unload by pentapenguin
   */
   window.onload = function()
   {
      for (var i = 0; i < onload_functions.length; i++)
      {
         eval(onload_functions[i]);
      }
   };

   window.onunload = function()
   {
      for (var i = 0; i < onunload_functions.length; i++)
      {
         eval(onunload_functions[i]);
      }
   };

// ]]>
</script>

Вот это у Вас что:

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

<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
}
<!-- ENDIF -->

[Alex39]

Все получилось, видно коды разные в скрипте сайта, раскоментировал строку

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

window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');

и все заработало

Добавлено спустя 4 минуты 47 секунд:

Это весь скрипт:

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

<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 and 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'><b>Вам пришло новое личное сообщение!</b></p><p class='click_view'><b><a href='ucp.php?i=pm&folder=inbox' class='view' title='{L_GO}'>{L_GO}</a></b></p><br /><p style='font-size: 1.2em; text-align: center'>{PRIVATE_MESSAGE_INFO}</p><cite></cite></div></div>");
             $("#form_popuppm").hide();
               $("#form_popuppm").show(1000);
              });
   <!-- ENDIF -->

   <!-- IF S_BIRTHDAY_POPUP -->

         var url = '{UA_POPUP_BIRTHDAY}';
         window.open(url.replace(/&amp;/g, '&'), '_phpbbbdpopup', 'height=225,resizable=yes,scrollbars=yes, width=400');

   <!-- ENDIF -->

   /**
   * Find a member
   */
   function find_username(url)
   {
      popup(url, 760, 570, '_usersearch');
      return false;
   }

   /**
   * New function for handling multiple calls to window.onload and window.unload by pentapenguin
   */
   window.onload = function()
   {
      for (var i = 0; i < onload_functions.length; i++)
      {
         eval(onload_functions[i]);
      }
   };

   window.onunload = function()
   {
      for (var i = 0; i < onunload_functions.length; i++)
      {
         eval(onunload_functions[i]);
      }
   };

// ]]>
</script>

Вот это у Вас что:

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

<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
}
<!-- ENDIF -->

У меня двиг немного другой, не phpbb3 а phpbbex который немного другой, это обновление устаревшего релиза phpbb3, так как обновление долго выходят, какая то организаци взялась сделать обновление, сейчас намного луше работает форум, сам вот недавно нашел и теперь довольный скриптом

[m-31]

Что то не выходит =(
Мой overall_header

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

<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();

[b]   <!-- IF S_USER_PM_POPUP and S_NEW_PM -->
      var url = '{UA_POPUP_PM}';
      window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
   <!-- ENDIF -->[/b]

   /**
   * Find a member
   */
   function find_username(url)
   {
      popup(url, 760, 570, '_usersearch');
      return false;
   }
   /**
   * New function for handling multiple calls to window.onload and window.unload by pentapenguin
   */
   window.onload = function()
   {
      for (var i = 0; i < onload_functions.length; i++)
      {
         eval(onload_functions[i]);
      }
   };
   window.onunload = function()
   {
      for (var i = 0; i < onunload_functions.length; i++)
      {
         eval(onunload_functions[i]);
      }
   };
// ]]>
</script>

[elhouse]

Что именно не выходит?