It is currently Thu 29 Sep 2016 - 08:43 - créer un forum

[Tuto] POPUP persistante de notification en DHTML

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 323, 24, 25  >

[Tuto] POPUP persistante de notification en DHTML
Author Message
altair


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 01:38    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

PublicitéSupprimer les publicités ?
Titre: POPUP persistante de notification en DHTML
Version: 1.0

Auteur: altair
Contact Auteur: Messagerie privé
Source: synthèse entre divers tutos et scripts / MP clignotant et persistant

Description: POPUP persistante et polyvalente pour notification de MP, MSG aux visiteurs, players...
une popup dhtml évite les inconvénients des popup classiques car elle n'est pas bloquée par les navigateurs et s'affiche sur la même page, elle peut aussi contenir des effets dynamiques (amovible, translucide...)


Niveau d'installation: Facile
Temps d'installation: 5 min
Nombre de template(s) à modifier : 1 ou 2

Fonctionne sur les thèmes : Tous
Test(s) effectué(s) sur :Xooit, Phpbb,
Compatible avec : Firefox, Internet Explorer...

Défaut(s) : à signaler
Exemple(s) :






I. Version dynamique (popup coulissante verticalement)

I. 1. POPUP adressée aux visiteurs (bienvenue, inscription...)

Exemple visible ici : http://deezayn.xooit.com/index.php




Ouvrir overall_header.tpl

Ajouter avant </head>

Code: Sélectionner - Agrandir
<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 10 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar1(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar1").style.visibility="hidden"
}

function staticbar1(){
barheight=document.getElementById("topbar1").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar1");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar1, false);
else if (window.attachEvent)
window.attachEvent("onload", staticbar1);
else if (document.getElementById)
(window.onload=staticbar1);

</script>


Ajoutez également avant </head>

Code: Sélectionner - Agrandir
<style type="text/css">
#topbar1 {
position:absolute;
background-color : #eaedf4;
border : 1px solid #9893C6;
-moz-border-radius: 12px;
padding: 4px 0px 14px 0px;
width: 360px;
visibility: hidden;
z-index: 20;
opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8;
}
</style>


variante 1 : sans image

Ajoutez après <body>

Code: Sélectionner - Agrandir
<!-- IF S_USER_LEVEL == "ANONYMOUS" -->   

<div align="center" id="topbar1">
<span><a href="" onclick="closebar1(); return false">
<img src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png" style="margin-left:326px;"  border="0">
</a></span>
<span style="color:#3253A4;"><b> Bienvenue humble visiteur <br />
Veuillez vous <a href="/profile.php?mode=register">inscrire</a>
 ou vous <a href="/login.php">connecter</a></b></span><br /></div>
 
<!-- ENDIF --> 



Variante 2 : avec une image



Ajoutez après <body>

Code: Sélectionner - Agrandir
<!-- IF S_USER_LEVEL == "ANONYMOUS" -->   

<div align="center" id="topbar1" style="opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
<span><a href="" onclick="closebar1(); return false">
<img src="http://img42.xooimage.com/files/1/0/9/close-67f4aa.gif" align="right" border="0">
</a></span>
<table border="0" width="100%" style="border-collapse: collapse">
   <tr>
      <td><img src="http://img2.xooimage.com/votre-image.gif" border="0"></td>
      <td align="center"><span style="color:#3253A4;"><b> Bienvenue humble visiteur <br />
Veuillez vous <a href="/profile.php?mode=register">inscrire</a>
 ou vous <a href="/login.php">connecter</a></b></span></td>
   </tr>
</table></div>

<!-- ENDIF --> 


à remplacer dans le code par l'adresse de votre image
Code: Sélectionner - Agrandir
http://img2.xooimage.com/votre-image.gif








I. 2. popup coulissante de notification d'MP

prise en compte de la notification en anglais



à placer avant </head> code (1)

Code: Sélectionner - Agrandir
<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 10 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar2(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar2").style.visibility="hidden"
}

function staticbar2(){
barheight=document.getElementById("topbar2").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar2");
stayTopLeft();
}

for (i=1; i<100; i++) {
var alerte = "{PRIVATE_MESSAGE_INFO}";
if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message" || alerte == "You have "+i+" new messages" || alerte == "You have 1 new message" )
{
if (window.addEventListener)
window.addEventListener("load", staticbar2, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar2)
else if (document.getElementById)
window.onload=staticbar2
}
}
</script>


à placer également avant </head> code (2)

Code: Sélectionner - Agrandir
<style type="text/css">
#topbar2 {
position:absolute;
visibility: hidden;
width: 300px;
z-index: 20;
padding: 4px 4px 4px 4px;
background-color : #eaedf4;
border : 1px solid #9893C6;
-moz-border-radius: 12px;
opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8;
}
</style>



à placer après <body> code (3)

Code: Sélectionner - Agrandir
<!-- BEGIN switch_user_logged_in -->
<div align="center" id="topbar2">
<span><a href="" onclick="closebar2(); return false">
<img src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png" align="right" border="0">
</a></span>
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center"><img src="http://img5.xooimage.com/files/f/1/e/email2-1ca94a.png" alt="{PRIVATE_MESSAGE_INFO}" border="0" align="bottom">
 {PRIVATE_MESSAGE_INFO}</a></b></span><br /></div>
<!-- END switch_user_logged_in -->


sauvegarder et fermer




Personnalisation de la popup


sur le code (1)

la distance par rapport à la bordure haute de la fenêtre
Code: Sélectionner - Agrandir
var startY = 4 //set y offset of bar in pixels


la distance par rapport au coté gauche de la fenêtre
Code: Sélectionner - Agrandir
var startX = 30 //set x offset of bar in pixels


persistance ou non
Code: Sélectionner - Agrandir
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session


placée en haut ou en bas
Code: Sélectionner - Agrandir
var verticalpos="fromtop" //enter "fromtop" or "frombottom"



sur le code (2)

la largeur est définie ici
Code: Sélectionner - Agrandir
width: 300px;


la couleur du fond
Code: Sélectionner - Agrandir
background-color : #eaedf4;


le contour de la popup
Code: Sélectionner - Agrandir
border : 1px solid #9893C6;


pour qu'elle soit toujours au premier plan
Code: Sélectionner - Agrandir
z-index: 20;


arrondir les coins (sous FF)
Code: Sélectionner - Agrandir
-moz-border-radius: 12px;


marges internes entre le contenu et le contour
Code: Sélectionner - Agrandir
padding: 4px 4px 4px 4px;


pour mettre une image de fond, il suffit de remplacer ceci
Code: Sélectionner - Agrandir
background-color : #eaedf4;
border : 1px solid #9893C6;

par cela
Code: Sélectionner - Agrandir
background: url("http://img.imageshack.us/xyz/image.jpg") no-repeat center center;

l'image doit avoir les mêmes hauteur et largeur que la popup


sur le code (3)

pour remplacer le bouton fermer
Code: Sélectionner - Agrandir
src="http://img44.xooimage.com/files/5/0/9/button-close-focused-676560.png"


niveau de transparence
Code: Sélectionner - Agrandir
opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;


le contenu du message (texte, couleur, style, images ...)
Code: Sélectionner - Agrandir
<span style="color:#3253A4;"><b><a href="{U_PRIVATEMSGS}" class="gen" align="center"><img src="http://img5.xooimage.com/files/f/1/e/email2-1ca94a.png" alt="{PRIVATE_MESSAGE_INFO}" border="0" align="bottom">
 {PRIVATE_MESSAGE_INFO}</a></b></span>


la hauteur est définie en fonction du contenu, il suffit d'ajouter des sauts de ligne dans le message
Code: Sélectionner - Agrandir
<br />














II. Version statique (fixe)

II. 1. POPUP de notification de nouveaux messages privés

II. 1. A - popup persistante translucide (s'affiche toujours tant que le message n'a pas était lus)

Ouvrez overall_header.tpl

Seulement si vous avez ce code, Cherchez et effacez
Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
   if ( {PRIVATE_MESSAGE_NEW_FLAG} )
   {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
   }
//-->
</script>
<!-- END switch_enable_pm_popup -->


Ajoutez après <body> ( code 1)
Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup -->

<table class="pmlinepop" id="new_pm_popup" cellspacing="0" cellpadding="0" style="border-collapse:collapse; opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
  <tr>
     <td style="height:60px; width:300px;" align="center">
   <a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;">
    <img style="position: absolute; left: 276px; top: 2px;" alt="" src="http://img5.xooimage.com/files/i/c/icon_delete-36ebc.gif" width="16" height="18" border="0" /></a>
   <a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a></td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
<!--
for (i=1; i<100; i++) {
alerte = "{PRIVATE_MESSAGE_INFO}";
if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message")
{
document.getElementById('new_pm_popup').style.display = 'inline';
}
}
//-->
</script>

<!-- END switch_enable_pm_popup -->


Ajoutez avant </head>
Code: Sélectionner - Agrandir
<style>
.pmlinepop {
   position : absolute;
   background-color : #eaedf4;
   border : 1px solid #006699;
   text-align : center;
   top : 20px;
   left : 30px;
   height : 60px;
   width : 300px;
   display: none;
}
</style>





II. 1. B - popup Non-persistante translucide (s'affiche une seule fois après la connexion)

Remplacez cette partie du code précédent ( code 1)
Code: Sélectionner - Agrandir
<script language="javascript" type="text/javascript">
<!--
for (i=1; i<100; i++) {
alerte = "{PRIVATE_MESSAGE_INFO}";
if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message")
{
document.getElementById('new_pm_popup').style.display = 'inline';
}
}
//-->
</script>


Remplacez par ce code
Code: Sélectionner - Agrandir
<script language="Javascript" type="text/javascript">
<!--
   if ( {PRIVATE_MESSAGE_NEW_FLAG} )
   {
document.getElementById('new_pm_popup').style.display = 'inline';
   }
//-->
</script>



II. 1. C - POPUP avec la même apparence que le forum



Remplacez cette partie du code précédent ( code 1)
Code: Sélectionner - Agrandir
<table class="pmlinepop" id="new_pm_popup" cellspacing="0" cellpadding="0" style="border-collapse:collapse; opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
  <tr>
     <td style="height:60px; width:300px;" align="center">
   <a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;">
    <img style="position: absolute; left: 276px; top: 2px;" alt="" src="http://img5.xooimage.com/files/i/c/icon_delete-36ebc.gif" width="16" height="18" border="0" /></a>
   <a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a></td>
  </tr>
</table>


Remplacez par ce code
Code: Sélectionner - Agrandir

<table border="0" width="100%" id="new_pm_popup" style="border-collapse:collapse; position:absolute; text-align:center; display:none; top:20px; left:30px; width:360px; height:200px;">
   <tr>
      <td>
<table class="forumline" style="border-collapse: collapse">
 <tr>
<td class="catHead" height="28" align="center"><span class="cattitle">Messages Privés</span></td></tr>
 <tr>
  <td class="row1 row-center" style="height:100%; width:100%;" align="center"><br /><span class="gen" height="100%">De nouveaux messages
   privés vous attendent dans votre Boîte de réception<br /><br />
<a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a><br /><br />
<a href="privmsg.php?folder=inbox" onclick="jump_to_inbox();return false;" target="_new">
   Cliquez ici</a> pour voir votre Boîte de réception<br /><br />
<a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;" class="gen">
   Fermer la Fenêtre</a></span><br /><br /></td>
 </tr>
</table>
      </td>
   </tr>
</table>




II. 2. A - POPUP adressée aux visiteurs (bienvenue, inscription...)



Ajoutez après <body>
Code: Sélectionner - Agrandir
<!-- BEGIN switch_user_logged_out -->
 
<table class="guestpop" id="new_pm_popup" cellspacing="0" cellpadding="0" style="border-collapse:collapse; opacity:.90; filter:alpha(opacity=90); -moz-opacity:0.9;">
  <tr>
     <td style="height:100px; width:360px;" align="center">
   <a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;">
    <img style="position: absolute; left: 336px; top: 2px;" alt="" src="http://img5.xooimage.com/files/i/c/icon_delete-36ebc.gif" width="16" height="18" border="0" /></a>
   <span class="gen">Bienvenue humble visiteur<p>Veuillez vous <a href="/profile.php?mode=register">inscrire</a> ou
   vous <a href="/login.php">connecter</a></span></td>
  </tr>
</table>

<!-- END switch_user_logged_out -->


Ajoutez avant </head>
Code: Sélectionner - Agrandir
<style>
.guestpop {
   position : absolute;
   background-color : #eaedf4;
   border : 1px solid #006699;
   text-align : center;
   top : 20px;
   left : 30px;
   height : 100px;
   width : 360px;
   display: inline;
}
</style>









Fin du Tuto


Last edited by altair on Sat 1 Nov 2008 - 09:55; edited 8 times in total
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 17 Sep 2008 - 03:23    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Génialissime comme d'habitude
Plus de pop up comme avant, c'est directement intégré au forum. Et en plus l'apparence est discrète tout en étant visible... sans parler de l'indication du nb de mp reçus :



Par contre penses à préciser que ce code ne figure pas dans tous les thèmes :
Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup --> 
<script language="Javascript" type="text/javascript"> 
<!-- 
   if ( {PRIVATE_MESSAGE_NEW_FLAG} ) 
   { 
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');; 
   } 
//--> 
</script> 
<!-- END switch_enable_pm_popup -->





     
     

_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
dimitriuss


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 07:51    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Ha....je vais le tester Wink

Author Message
dimitriuss


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 07:57    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Moi sa m'intéresse surtout pour les visiteurs...mais on ne pourrais pas installer sa dans le portail ?

Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Wed 17 Sep 2008 - 08:06    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

bonjour

oui il suffit de mettre les codes dans ton portal body
_______________________


Forum
Author Message
dimitriuss


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 08:25    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Ha  Mr. Green J'ai de la chance d'être levé tôt car je vais avoir du taff ce matin Wink et une autre question, n'y aurrait t'il pas possibilité de pouvoir afficher cette 'pop-up' QUE en cliquant sur un lien ?

Author Message
altair


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 08:41    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

YSKANDER wrote:
Génialissime comme d'habitude
Plus de pop up comme avant, c'est directement intégré au forum. Et en plus l'apparence est discrète tout en étant visible... sans parler de l'indication du nb de mp reçus :



Par contre penses à préciser que ce code ne figure pas dans tous les thèmes :
Code: Sélectionner - Agrandir
<!-- BEGIN switch_enable_pm_popup --> 
<script language="Javascript" type="text/javascript"> 
<!-- 
   if ( {PRIVATE_MESSAGE_NEW_FLAG} ) 
   { 
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');; 
   } 
//--> 
</script> 
<!-- END switch_enable_pm_popup -->





     
     


Bonjour

effectivement certains thèmes ne disposent pas d'une popup de notification

sinon l'apparence peut être encore amélioré en fonction de chaque théme... possibilité d'arrondir les coins ou de mettre une image semi-transparente comme fond...


Author Message
altair


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 08:43    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

dimitriuss wrote:
Ha  Mr. Green J'ai de la chance d'être levé tôt car je vais avoir du taff ce matin Wink et une autre question, n'y aurrait t'il pas possibilité de pouvoir afficher cette 'pop-up' QUE en cliquant sur un lien ?



Bonjour

pour la version statique

il suffit d'utiliser ce lien

Code: Sélectionner - Agrandir
<a href="" onClick="getElementById('new_pm_popup').style.display = 'inline'; return false;">Afficher la popup</a>


et de retirer le code qui permet de l'afficher automatiquement


Author Message
dimitriuss


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 09:01    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Ok, et c'est quoi le lien qui permet de l'afficher automatiquement ?

Author Message
altair


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 09:31    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

dimitriuss wrote:
Ok, et c'est quoi le lien qui permet de l'afficher automatiquement ?


pour la popup qui s'affiche aux visiteurs (la variante I. 2. A)

pour qu'elle s'affiche plus automatiquement, et que à la place on doit cliquer sur un lien pour la faire apparaitre ...

utilises ces codes ci (en retirant les autres)


Ajoutez avant </head>
Code: Sélectionner - Agrandir
<style>
.guestpop {
   position : absolute;
   background-color : #eaedf4;
   border : 1px solid #006699;
   text-align : center;
   top : 20px;
   left : 30px;
   height : 100px;
   width : 360px;
   display: none;
}
</style>


Ajoutez après <body>
Code: Sélectionner - Agrandir
<table class="guestpop" id="new_pm_popup" cellspacing="0" cellpadding="0" style="border-collapse:collapse; opacity:.90; filter:alpha(opacity=90); -moz-opacity:0.9;">
  <tr>
     <td style="height:100px; width:360px;" align="center">
   <a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;">
    <img style="position: absolute; left: 336px; top: 2px;" alt="" src="http://img5.xooimage.com/files/i/c/icon_delete-36ebc.gif" width="16" height="18" border="0" /></a>
   <span class="gen">Bienvenue humble visiteur<p>Veuillez vous <a href="http://deezayn.xooit.com/profile.php?mode=register">inscrire</a> ou
   vous <a href="http://deezayn.xooit.com/login.php">connecter</a></span></td>
  </tr>
</table>



utilises ce lien ci pour la faire afficher
Code: Sélectionner - Agrandir
<a href="" onClick="getElementById('new_pm_popup').style.display = 'inline'; return false;">Afficher la popup</a>

tu peux l'enserrer dans index_body.tpl ou dans ovearall_header.tpl après <body>
ou bien dans un module du portail

pour changer le contenu du message de la popup
cherches ceci dans le premier code
Code: Sélectionner - Agrandir
<span class="gen">Bienvenue humble visiteur<p>Veuillez vous <a href="http://deezayn.xooit.com/profile.php?mode=register">inscrire</a> ou
   vous <a href="http://deezayn.xooit.com/login.php">connecter</a></span>

et remplaces le par le message que tu veux


.


Author Message
Twilight


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 13:16    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Mais c'est excellent, merci beaucoup Altair, je m'affaire à cela dès que possible, en plus si elle se mets seule au design du forum, ça va faire un truc grandiose ! Parfait, simplement parfait ! Smile

Par contre, essayes de corriger les 2-3 fautes d'orthographes qu'il y'a dans ton tutoriel, parce que certaines sont assez moches. Wink

A la prochaine, et bonne journée à tous.


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 17 Sep 2008 - 16:04    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Altair "arrondir les coins" là tu me prends par les sentiments  Very Happy
Voilà le code pour arrondir :


 
Code: Sélectionner - Agrandir

        <!-- BEGIN switch_enable_pm_popup -->

    <table class="pmlinepop" id="new_pm_popup" cellspacing="0" cellpadding="0" style="-moz-border-radius:12px;border-collapse:collapse; opacity:.80; filter:alpha(opacity=80); -moz-opacity:0.8;">
      <tr>
         <td style="height:60px; width:300px" align="center">
       <a href="" onClick="getElementById('new_pm_popup').style.display = 'none'; return false;">
        <img style="position: absolute; left: 276px; top: 2px;" alt="" src="http://img5.xooimage.com/files/i/c/icon_delete-36ebc.gif" width="16" height="18" border="0" /></a>
       <a href="{U_PRIVATEMSGS}" class="gen" align="center">{PRIVATE_MESSAGE_INFO}</a></td>
      </tr>
    </table>

    <script language="javascript" type="text/javascript">
    <!--
    for (i=1; i<100; i++) {
    alerte = "{PRIVATE_MESSAGE_INFO}";
    if ( alerte == "Vous avez "+i+" nouveaux messages" || alerte == "Vous avez 1 nouveau message")
    {
    document.getElementById('new_pm_popup').style.display = 'inline';
    }
    }
    //-->
    </script>

    <!-- END switch_enable_pm_popup -->



Ton tuto est plus que génial
Adopté pour ma part sur mon fofo
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
dimitriuss


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 17:54    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Chèr ISKANDER,

Après avoir regardé de près...et rien avoir compris au tuto de Mr Altair, pouvez vous m'expliquer où mettre (ou remplacer) le code fourni dans votre dernier message ?

Je vous serez très reconnaissant,

Mes sincères salutations...


Author Message
Twilight


Offline
Guest




PostPosted: Wed 17 Sep 2008 - 17:57    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

dimitriuss wrote:
Chèr ISKANDER,

Après avoir regardé de près...et rien avoir compris au tuto de Mr Altair, pouvez vous m'expliquer où mettre (ou remplacer) le code fourni dans votre dernier message ?

Je vous serez très reconnaissant,

Mes sincères salutations...


Salut,

Le code de Yksander se place apparement après la balise

Code: Sélectionner - Agrandir
<body>


de ton template Overral_Header.

Normalement, ça devrais marcher, bonne chance. Wink


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 17 Sep 2008 - 18:03    Post subject: [Tuto] POPUP persistante de notification en DHTML Reply with quote

Exact
Le code que je donne permet de mettre les bords arrondis (visible sous fx d'après le tuto de themalin) pour la version
I. 1. A - popup persistante translucide (s'affiche toujours tant que le message n'a pas était lus)
 
d'altair
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 08:43    Post subject: [Tuto] POPUP persistante de notification en DHTML

Display posts from previous:   
Reply to topic Page 1 of 25 Goto page: 1, 2, 323, 24, 25  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401