Création d'un pop-up de menu sur la page d'accueil du forum ?

[Le Roy arthur]

Rappel du premier message :

Bonsoir à toutes et à tous,

Alors voilà, je souhaiterais créer un pop-up qui s'ouvre dés qu'on arrive sur la page d'accueil du forum. Mais attention, il ne s'agit pas d 'un pop-up invitant le quidam à s'inscrire où se connecter mais d'un pop-up présentant les dernières nouveautés du forum (les derniers membres inscrits, les derniers articles publiés, les plus populaires, les thèmes que je souhaiterais voir abordé, etc. ...).
Par conséquent il me faudrait un pop-up sans bouton "ne plus afficher" puisque le but est qu'il revienne à chaque nouvelle visite (CQFD ). Les boutons "connexion" où "s'enregistrer" ne sont pas indispensables non-plus. Un simple bouton "fermer" ferait largement l'affaire...

Par conséquent, une âme charitable aurait-elle un code HTML correspondant à me fournir ?

Par avance, un très grand merci !!!

Arthur

[Invité]

Attend je prépare tous ça et je t'explique. Bonne soirée

edit > 21h29

slt arthur , donc ont reprend du début .

le codage html a mettre dans un premier temps dans l'accueil du forum , plus facile pour toi
(ensuite si tu veut le placé dans un template , demande moi )..

le code html

Code:

<a href="#?w=500" rel="video" class="open_video"><strong>information</strong></a>
<div class="popup_block" id="video" style="display: block;">
     
  <div id="shadow">
        Bonsoir à toutes et à tous, Alors voilà, je souhaiterais créer un pop-up qui s'ouvre dés qu'on arrive sur la page d'accueil du forum. Mais attention, il ne s'agit pas d 'un pop-up invitant le quidam à s'inscrire où se connecter mais d'un pop-up présentant les dernières nouveautés du forum (les derniers membres inscrits, les derniers articles publiés, les plus populaires, les thèmes que je souhaiterais voir abordé, etc. ...). Par conséquent il me faudrait un pop-up sans bouton "ne plus afficher" puisque le but est qu'il revienne à chaque nouvelle visite (CQFD Wink). Les boutons "connexion" où "s'enregistrer" ne sont pas indispensables non-plus. Un simple bouton "fermer" ferait largement l'affaire... Par conséquent, une âme charitable aurait-elle un code HTML correspondant à me fournir ? Par avance, un très grand merci !!! Arthur Le Roy arthur *** Messages: 116 Réputation: 0 Inscrit(e) le: 26/06/2014 Aucun avertissement Firefox PhpBB3 Fondateur de forum: Oui CSS personnalisé: Non Templates modifiés: Non Voir le profil de l'utilisateur Envoyer un message privé http://www.coeur-bretagne.forumactif.org/ 
      <div id="close">
          <a onclick="return false" href="#"><img alt="ferme" src="http://i21.servimg.com/u/f21/16/87/83/03/forum110.png" /></a>
      </div>
  </div>
</div>

le css

Code:

/**============pop-up video ===============**/
.open_pop{ color:#000; font:bold 1.3em Arial, Helvetica, sans-serif;}
#close{ width:50px; height:50px; position:absolute; bottom:0px; right:50%; color:#FFF; z-index:2;}
#shadow{ width:656px; min-height:656px; background:#000; position:absolute;margin:auto; top:100px;left:0px;right:0px;
z-index:0;text-align:justify;padding:25px;}
/**===============fin pop-up ===================**/

ensuite ont va placé le javascript , dans
>PANNEAU ADMIN>MODULE>TOUS EN BAS >GESTION DES CODES JAVASCRIPT>CR2E UN NOUVEAU JAVASCRIPT>METTRE UN TITRE ...(POP-UP) par exemple....>cocher sur l'index>collé ce java >

Code:

$(document).ready(function(){
  $('.open_video').click(function(){
      $('#shadow').css({opacity:0.7});
      $('#shadow').fadeIn(300);
      $('#video').fadeIn(1000);
   
      return false;
  });
 
  $('#shadow, #close').click(function(){
      $('#shadow, #video').fadeOut(300);
  });
});

enregistré et c'est fini .

ps:j'attend ton retour .bonne soirée ,

[Le Roy arthur]

Désolé, weekend chargé, pas en avance : je teste de suite !!!

[Le Roy arthur]

Super R-max : ça fonctionne !!! Un très grand merci !!!

Par contre j'aurais encore une questions pour compliquer la chose et après je ne t'embête plus

Comment puis-je faire "flotter" ce pop-up ? C'est qu'il reste au centre de l'écran même si l'utilisateur fait défiler le forum en second plan, qu'il ne reste pas bloqué en haut quoi...

En te remerciant une nouvelle fois pour toute ta patience et ta persévérance !!!

[Le Roy arthur]

Je me permets également R-max : après test, je viens de m'apercevoir que le texte contenu dans le pop-up déborde
Regardes : http://virtuellementvotre.forumactif.org/

[no_way]

Bonjour, merci d'éditer votre message au lieu de faire du double, triple post.

Arrivé à plus de 100 messages, vous n'êtes plus considéré comme un nouveau membre et devez donc connaître les règles

Cordialement.

[Invité]

Je me permets également R-max : après test, je viens de m'apercevoir que le texte contenu dans le pop-up déborde

bonjour ,et bien oui vu comme ca ce texte qui n'en est pas un ,juste un flux continu de consonne ou syllabe.

peut tu mettre celui la a la place , texte tiré du reglement de forumactif,

texte:

logiquement il ne devrait pas debordé ...

[Le Roy arthur]

C'est fait R-max !!!

Donc le texte ne semble plus déborder...

En revanche, je n'ai pas fait attention ce matin car j'ai surtout focalisé sur le bouton (...) mais là je viens de m'apercevoir que c'est le pop-up tout entier qui est cliquable au lieu du seul bouton "FERMER"

Je viens également de me rendre compte que malgré une mise en page soignée, le texte apparaît au kilomètre à l'intérieur du pop-up

Ouais, c'est bien compliqué tout ça !!!

[Invité]

bonsoir arthur ,remplace le javascript par celui ci

Code:

$(document).ready(function(){
  $('.open_video').click(function(){
      $('#shadow').css({opacity:0.7});
      $('#shadow').fadeIn(300);
      $('#video').fadeIn(1000);
   
      return false;
  });
 
  $(' #close').click(function(){
      $('#shadow, #video').fadeOut(300);
  });
});

j'ai déconnecter le shadow du java ,maintenant seul le bouton doit fermer la pop-up,

[Le Roy arthur]

Super R-max, je te remercie : on se rapproche de la perfection J'aurais encore deux questions et après je ne t'embête plus

1/ Comment fait-on pour la mise en page du texte dans le pop-up ? Hier soir j'ai fait une mise en page du texte pour voir mais ça ne fonctionne pas... à l'écran ça fait un gros pavé immonde, sans espace, sans retour à la ligne, bref pas le top pour un menu actu

2/ Et sinon, peut-être un peu compliqué mais je souhaiterais toujours faire "flotter" ce pop-up, pour qu'il reste toujours au centre de l'écran même si l'utilisateur fait défiler le forum en arrière-plan ? Comment faire ???

Par avance un très grand merci R-max !!!

[Invité]

bonjour arthur , donne moi ta mise en page que je regarde de plus prés ..

pour le scroll , j'ai tenter 2 ou 3 chose sans résulta pour le moment

[lmc38510]

.

Super sujet suivi avec grand intérêt ...

Aux Participants ...!

.

[Le Roy arthur]

Bonsoir R-max, pour la mise en page je n'ai pas de plan précis, j'ai juste repris le texte que tu m'as donné en sautant des lignes pour tester mais ça ne fonctionne pas... Maintenant si tu souhaites une véritable mise en page, je t'en ferais une pour demain après-midi

[Invité]

si tu sait ,tu peut faire une mise en page en html ,avec des tableaux ..

[Le Roy arthur]

Non en fait ce qui m'intéresserait c'est ce faire une mise en page classique avec des tirets, des espaces et des paragraphes justifiés aussi simplement qu' on rédigerait un message sur le forum. C'est ça l'idée

[Invité]

ok je voie , il faut changé le mode d'édition


mise en page >>




clique sur le bouton >>:wysiwyg: et publie le tel quel ..


mise en page sur la pop-up>>



si tu ne procède pas comme ça l’éditeur supprime la mise en page

[Le Roy arthur]

En fait lorsque j'ai cliqué sur le bouton que tu m'as indiqué, malgré ma mise en page, le texte est resté en gros pâté et lorsque j'ai poursuivi la mise en page, notamment en créant de nouveaux espaces, au fur et à mesure, tout a disparu du pop-up

Peut-être serait-il plus simple que tu m'indiques comment sauter des lignes en langage HTML ?

Message édité à 18:19 :

Je viens de réessayer à l'instant, définitivement cette solution ne fonctionne pas : lorsque je tape du texte en mode éditeur, il n’apparaît pas dans le pop-up

[Invité]

re , fait une mise en page rapide et donne la moi , je teste .

[Le Roy arthur]

Bonsoir R-max, donc je te livre le code en l'état. La mise en page succincte est en rouge. Comme tu vois elle se compose de tirets et de sauts de ligne qui chacun, dans mon projet final, correspondront à une rubrique


<a class="open_video" rel="video" href="#?w=500"><strong>information</strong></a>
<div style="display: block;" id="video" class="popup_block">

<div id="shadow">

<div align="center">
<img alt="" border="0" src="https://i.servimg.com/u/f21/18/54/10/79/actu_f11.jpg" />
</div>

<div align="justify">
Test du pop-up :

_ Je teste le pop-up, tu testes le pop-up

_ Il teste le pop-up, elle teste le pop-up

_ Nous testons le pop-up, vous testez le pop-up, ils et elles testent le pop-up...
</div>

<div id="close">
<a href="#" onclick="return false"><img src="https://i.servimg.com/u/f21/18/54/10/79/coolte11.png" alt="ferme" /></a>
</div>

</div>
</div>


Sauf que quand je tape ça, concrètement, le résultat à l'écran donne ceci : http://virtuellementvotre.forumactif.org/

[Invité]

re , voici , poste en mode edition normal

Code:

<a href="#?w=500" rel="video" class="open_video"><strong>information</strong></a>
<div class="popup_block" id="video" style="display: block;">
    
   <div id="shadow">
       
      <div align="center">
          <img src="http://i21.servimg.com/u/f21/18/54/10/79/actu_f11.jpg" border="0" alt="" /> 
      </div>
       
      <div align="justify">
          
         <ul>
             
            <li>
                
               <p>
                   Test du pop-up :
               </p>
                
               <p>
                   _ Je teste le pop-up, tu testes le pop-up
               </p>
               
               <p>
                    _ Il teste le pop-up, elle teste le pop-up
               </p>
                
               <p>
                    _ Nous testons le pop-up, vous testez le pop-up, ils et elles testent le pop-up...
               </p>
                  
            </li>
             
         </ul>
          
      </div>
       
      <div id="close">
          <a onclick="return false" href="#"><img alt="ferme" src="http://i21.servimg.com/u/f21/18/54/10/79/coolte11.png" /></a> 
      </div>
         
   </div>
</div>

[Le Roy arthur]

Donc il faut que je mette les balises <p> et </p> entre chaque rubrique pour obtenir des paragraphes à l'écran ?

Bon ben c'est un peu fastidieux mais on va se débrouiller C'est dommage que le mode édition ne fonctionne pas correctement...

En tout cas je te remercie pour l'info R-max !!!

Et sinon, si on s'attaquait à la dernière étape : le "flottement" du pop-up Après je ne t'embêterais plus R-max, tu as déjà fait beaucoup pour moi !!!

[Invité]

comme la pop-up a une valeur :position absolute , pour pouvoir la placé , je ne sait pas comment la contourné ,

j'ai tenter un background-attachement :fixed sans résulta ..

no_way aurais t'il une idée sur la question , ou quelqu'un d'autre !!!!!!

[Le Roy arthur]

Si toi tu es mon bienfaiteur, je pense que no_way peut-être l'homme providentiel effectivement

[no_way]

@R-max
Salut, il suffit de remplacer la valeur absolute par fixed

Code:

position:fixed;

info:

@++ et merci R-max de faire cette aide.

[Le Roy arthur]

Merci pour ces informations supplémentaires no_way mais où dois-je placer ces codes exactement ?

C'est pareil : je ne trouve pas la valeur absolute dans les codes que R-max m'a donné ?

Message édité à 14:43

Super, j'ai trouvé où mettre "fixed", dans les code CSS

Par contre j'ai fouiné un peu et je ne sais toujours pas où mettre les codes que tu m'as conseillé no_way ?

Par avance merci de m'indiquer où les placer pour que je ne détruise pas tout le travail de R-max...

[Invité]

slt arthur , no_way et indisponible quelques jours ..

j'ai remplacé les codes qu'il a donné ,

par contre vu que maintenant la pop-up et en fixed, il faut changé la taille ,sinon le bouton ne se voie plus ,

remplace le css par celui ci >>
j'ai ajouté le cursor:pointer;>
la taille 550px;>
j'ai enlever les z-index qui dans cette configuration ne servent a rien ..

Code:

/**============pop-up video ===============**/
.open_pop{  color:#000; font:bold 1.3em Arial, Helvetica, sans-serif;}
 
#close{ cursor:pointer;width:50px; height:50px; position:absolute; bottom:0px; right:50%; color:#FFF;}
 
#shadow{  width:656px; min-height:550px; background:#000; position:fixed;margin:auto; top:50px;left:0px;right:0px;
text-align:justify;padding:25px;}
/**===============fin pop-up ===================**/

le code html dans géneralité >>

j'ai remplacé le lien image >

Code:

<a href="#?w=500" rel="video" class="open_video"><strong>information</strong></a>
<div class="popup_block" id="video" style="display: block;">
            
   <div id="shadow">
                     
      <div align="center">
                   <img src="http://i21.servimg.com/u/f21/18/54/10/79/actu_f11.jpg" border="0" alt="" />       
      </div>
                     
      <div align="justify">
                              
         <ul>
                                       
            <li>
                                                
               <p>
                                      Test du pop-up :               
               </p>
                                                
               <p>
                                      _ Je teste le pop-up, tu testes le pop-up               
               </p>
                                              
               <p>
                                      _ Il teste le pop-up, elle teste le pop-up               
               </p>
                                                
               <p>
                                      _ Nous testons le pop-up, vous testez le pop-up, ils et elles testent le pop-up...               
               </p>
                                              
            </li>
                                   
         </ul>
                          
      </div>
                     
      <div id="close">
                       <img src="http://i21.servimg.com/u/f21/18/54/10/79/coolte11.png" alt="ferme" />   
      </div>
                   
   </div>
</div>

remplace le texte dans la pop-up par le tien ..

[Le Roy arthur]

Bonsoir R-max,

Je vais faire ça, par contre sur ton site test, je constate que le pop-up est plus petit du coup ? Je crains d'être un peu à l'étroit pour y rédiger mon actu... n'y a-t-il pas possibilité de redimensionner en 656 x 656 px ?

En revanche tu me confirmes qu'ainsi le forum sera plus accessible au niveau des tablettes et des smartphones ?

En te remerciant une nouvelle fois

[Invité]

le problème de la taille ,et bien parce que tu la veut en fixe ..donc il faut la limité en hauteur,comme le bouton et en bas il faut qu'il soie visible.

comprend tu !!

[Le Roy arthur]

Arf !!! Il n'y a vraiment pas moyen de faire un peu plus grand ??? Je sais, je suis exigeant

[Invité]

regarde sur ton forum de test le résulta en fixed ..



j'ai un écran de 15 pouces , et je ne vois pas le bouton fermer .. donc soit tu lui impose une taille en hauteur pour laissé apparaître le bouton , soit ont repasse en scroll.

sur mon forum de test ,j'ai modifier la taille . le bouton est visible ..


ps:je pense qu'il va falloir faire un chois .le scroll ou la hauteur de la pop-up.

[Le Roy arthur]

Ah ok !!! Tu parles pour les utilisateurs de tablettes c'est ça ? C'est pour qu'ils puissent fermer le pop-up ?

Message édité à 16:05

Et je pensais, petite question existentielle : la couleur des polices de caractère à l'intérieur du pop-up, elle s'adapte automatiquement en fonction du forum ? Je veux dire sur mon forum test elle est bleu mais sera-t-elle grise sur le nouveau ?