*RESOLU* [PHPBB2] Faire Appaître une pop-up avec une css souhaitez

Voir le sujet précédent Voir le sujet suivant Aller en bas

Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonjour
Je souhaiterais savoir s'il était possible de faire apparaître une petite pop up en plein milieu de l'écran quand un simple visiteur arrive sur le forum ? (Cela, mise à part le message de connexion) et que cette pop - up ne puis-ce pas être désactiver ? Comme un message automatique, cela aussi peut être placer en haut du forum comme un message de "confirmation" pas forcement au milieu ^^ je veut juste que mes visiteurs soit au courant de quelque chose quand ils arrivent <3
Bonne soirée tout le monde 


Dernière édition par Sick.l.Offrande le Lun 10 Juil 2017 - 20:11, édité 1 fois
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,

alors comme il faut laisser de la place pour le menu de connexion, la fenêtre que tu demandes sera donc placée en bas du forum:

On va commencer par placer le script qui déposera le texte que tu souhaites directement dans la div qui sera placée dans le template Overall_header, cela sera bien plus pratique pour modifier ou ajouter du contenu:


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur toutes les pages.




Déposes ceci:
Code:
$(function(){
// texte a déposer entre les guillemets
  var M14_texte="Merci de venir regarder ce sujet :<br /><a href='Le lien'>Le texte du lien</a>";
//NE PAS TOUCHER
$('#M14_Not_Connect').append(''+M14_texte+'');
});
Penses a cliquer sur le bouton Valider

Il faudra donc changer le texte qui est placé entre les guillemets par ce que tu souhaites.

Avec l'exemple déposé dans le script, l'invité verra ceci:

Merci de venir regarder ce sujet :
Le texte du lien

Dans le template overall_header:
Affichage/Templates/Général/ overall_header


Recherches ceci:
Code:
 <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>

Juste en dessous déposes ceci:
Code:


<!-- BEGIN switch_user_logged_out -->
<div id="M14_Not_Connect"></div>
<!-- END switch_user_logged_out -->


Tout en bas du templates déposes ceci:
Code:

<style>
/*Pop up non connecté*/
#M14_Not_Connect
{
background:url(http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg)no-repeat;
color:white!important;
font-size:12px !important; 
height: 200px;
left: 40%;
position: fixed;
bottom: 10px;
width: 20%;
padding:5px; 
border:10px solid white;
}
/*Lien dans Pop up non connecté*/
#M14_Not_Connect a{color:white !important;font-size:12px !important;  }

</style>



Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout


Si tu veux placer la "pseudo popup" plus haut il faudra modifier le
bottom: 10px;
par ce que tu souhaites Sandra clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Hô merci de tout coeur Milouze, cette pop-up est juste génial =) 
Mais est ce que je pourrait avoir un petit bouton pour la fermer ? ^^ 
Je te souhaite une très agréable fin de journée <3
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Sick.l.Offrande a écrit:Hô merci de tout coeur Milouze, cette pop-up est juste génial =) 
Mais est ce que je pourrait avoir un petit bouton pour la fermer ? ^^ 
Je te souhaite une très agréable fin de journée <3

Bonjour Sick,
ta demande initiale spécifiait que la pop-up ne puisse être désactivée.

Sick.l.Offrande a écrit: que cette pop - up ne puis-ce pas être désactiver 




Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Ha oui, désactiver par le navigateur ^^ 
Mais que le membre puis-ce la fermer tout de même =) 
Je te souhaite une très agréable soirée <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,
hum tu aurais dû le préciser avant pour le bouton de fermeture.....
Alors j'ai corrigé l'apparence du conteneur afin que ce dernier ne soit pas tronqué si le texte est trop important, un scroll viendra s'ajouter le cas échéant.

Dans le template,
Remplaces ceci:
Code:


    <!-- BEGIN switch_user_logged_out -->
    <div id="M14_Not_Connect"></div>
    <!-- END switch_user_logged_out -->


Par :
Code:

<!-- BEGIN switch_user_logged_out -->
              <div id="M14_Not_Connect">
                <span class="M14_Close_Connect"title="Fermer la fenêtre"><img src="https://i11.servimg.com/u/f11/11/26/21/37/delete11.png"/></span>
                <div>Patientez.....</div></div>
<!-- END switch_user_logged_out -->




Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer  puis  Ajout


J'ai placé une image pour la fermeture ici:
Code:
     <span class="M14_Close_Connect"title="Fermer la fenêtre"><img src="https://i11.servimg.com/u/f11/11/26/21/37/delete11.png"/></span>

Tu peux la remplacer à condition qu'elle ait ces dimensions ( 16px par 16px )


Remplaces toute la c.s.s donnée par celle-ci:
Code:
/*Pop up non connecté*/
#M14_Not_Connect
{
background:url(http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg)no-repeat;
color:white!important;
font-size:12px !important;  
height: 200px;
left: 40%;
position: fixed;
bottom: 10px;
width: 250px;
padding:5px;  
border:10px solid white;
}
/*Lien dans Pop up non connecté*/
#M14_Not_Connect div a{color:orange !important;font-size:12px !important; text-decoration:none !important; }
/* le conteneur de texte*/
#M14_Not_Connect div
{
height: inherit;
overflow-y: auto;
width: inherit;
}
/*Le bouton de fermeture*/
.M14_Close_Connect
{
display:none;
cursor: pointer;
font-size: 14px;
background-color: white;
height: 24px;
width: 24px;
margin-left: 240px;
margin-top: -30px;
position: absolute;
text-align: center;
}
.M14_Close_Connect img{margin-top: 4px;}


Remplaces ce script :
Code:

    $(function(){
    // texte a déposer entre les guillemets
      var M14_texte="Merci de venir regarder ce sujet :<br /><a href='Le lien'>Le texte du lien</a>";
    //NE PAS TOUCHER
    $('#M14_Not_Connect').append(''+M14_texte+'');
    });


Par celui-ci:
Code:

$(function(){
// texte a déposer entre les guillemets
  var M14_texte="Merci de venir regarder ce sujet concernant l'herbe:<br /><a href='Le lien'>Le texte du lien</a>";
//NE PAS TOUCHER
$('#M14_Not_Connect div').html(''+M14_texte+'');
  
  $('.M14_Close_Connect').each(function(){
    // temporisation de 5 secondes et on affiche la fermeture
    $(this).delay('5000').fadeIn();
    // au clic on ferme la div
    $(this).click(function(){
      $(this).closest('div').fadeOut();
    });});
});




Le script va faire la chose suivante:

L'aperçu imagé:
On donne l'apparence d'un chargement:



Puis le texte dans le conteneur s'affiche:



Puis 5 secondes après le bouton de fermeture vient prendre place:



Si tu désires retirer cette temporisation de 5 secondes, il suffit de remplacer cette ligne:
Code:

// temporisation de 5 secondes et on affiche la fermeture
    $(this).delay('5000').fadeIn();


Par:
Code:

$(this).fadeIn();

Le dernier aperçu contient un scroll volontairement, si le contenu n'est pas important ,
ce scroll n'aura pas lieu d'être Sandra clin oeil .

Et voilou hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Merci beaucoup Milouze c'est vraiment parfait =) 
Mais puis-je déplacer le bouton plus prêt de la fenêtre ? Ce sera juste un petit détails pour terminer :) 
Je te souhaite une très agréable journée <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Mais puis-je déplacer le bouton plus prêt de la fenêtre ? Ce sera juste un petit détails pour terminer :)

Non Sandra car si le contenu affiche un scroll, le bouton de fermeture viendra
ce positionner dessus



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Oki Milouze, 
Pas de soucis alors je met le sujet en résolus et je te remercie mille fois pour ton aide tu est juste adorable (l) !
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
De rien Sandra ,

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum