Afficher une popup avec un bouton

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Afficher une popup avec un bouton

    Bonjour,
    Je suis en train de créer un composant qui permet d'afficher (sous forme de fiches) le catalogue des formations d'un organisme.
    Tout fonctionne bien.

    Pour cela j'ai un formulaire qui enregistre les infos dans une table, je récupère ensuite ces infos pour fabriquer les fiches.

    Maintenant, sur les fiches, j'aimerai ajouter un bouton qui me permette d'afficher dans une popup le contenu d'un des champs de de l'enregistrement qui correspond à la fiche.

    Je cherche, mais n'arrive pas à trouver comment faire cela.

    Je partais sur cette idée.... mais je bloque.

    Code PHP:
    <div <class="validate btn btn-primary"  <a href="#null" onclick="javascript:open_infos();">Programme</a>
    <
    script type="text/javascript">
                    function 
    open_infos()
                        {
                            
    window.open(' ??? ','Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600');
                        }
                </
    script>
    </
    div
    Il me faudrait l'idée pour appeler le bon contenu à la place des ??? que j'ai posé là où je bloque.
    style rappeler: $item->programme; (Mon champ s'appelle "programme" dans la table)

    Pour info l'URL est: http://www.formabook.eu/demos
    Les fiches sont accessibles par le lien "CATALOGUE" du menu. (Le bouton en question est "Programme" dans le pieds de chacune des fiches)

    Quelqu'un pourrait-i m'aider ?

    Cordialement.

    Eric
    Dernière édition par Agrepe à 13/04/2017, 10h32

  • #2
    Re : Afficher une popup avec un bouton

    si tout ton contenu est dans $item->programme, alors il te suffit de faire l'appel en php:
    Code HTML:
    <div <a class="validate btn btn-primary"  <a href="#null" onclick="javascript:open_infos();">Programme</a> 
    <script type="text/javascript"> 
                    function open_infos() 
                        { 
                            window.open(<?php echo $item->programme; ?>,'Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600'); 
                        } 
                </script> 
    </div>  
    Autrement, si tu veux une popup Modal avec un peu de classe, install le plugin JCE MédiaBox.
    Dans /tmp tu ajoute programme.php (qui affiche le contenu de $item->programme )
    Et dans le fichier vue (/tmpl/default.php)

    Code HTML:
    <a href="programme.php" target="_blank" class="jcepopup" data-mediabox-caption="Programme" data-mediabox-title="Programme">
    Developper of JBreeding Manager: http://www.jbreeding.fr/
    J-cook Referral : Service Générateur d'Extensions pour Joomla

    Commentaire


    • #3
      Re : Afficher une popup avec un bouton

      Envoyé par liubov Voir le message

      Autrement, si tu veux une popup Modal avec un peu de classe, install le plugin JCE MédiaBox.
      Le code ci dessous est très malformé.... on ne peut avoir de balise <a> àl'intérieur d'une balise <a>
      Code:
      <div <a class="validate btn btn-primary"  <a href="#null" onclick="javascript:open_infos();">Programme</a> 
      <script type="text/javascript"> 
                      function open_infos() 
                          { 
                              window.open(<?php echo $item->programme; ?>,'Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600'); 
                          } 
                  </script> 
      </div>
      pour avoir une modale, le lien devrais être <a class="modal validate btn btn-primary">

      Le lien devrais être # et non #null

      pour afficher le bouton demandé il faut créer le code ci dessous

      <button class="validate btn btn-primary" onclick="open_infos()">Programme</button>

      Dans l'entete du fichier index.php insérer
      <script>
      function open_infos()
      {
      window.open(<?php echo $item->programme; ?>,'Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600');
      }
      </script>


      le code correct par rapport au premier post:

      <div> <a class="validate btn btn-primary" onclick="open_infos()">Programme</a>
      <script type="text/javascript">
      function open_infos()
      {
      window.open(<?php echo $item->programme; ?>,'Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600');
      }
      </script>
      </div>
      Dernière édition par lefabdu51 à 13/04/2017, 16h39
      Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
      un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

      Commentaire


      • #4
        Re : Afficher une popup avec un bouton

        Envoyé par lefabdu51 Voir le message
        Le code ci dessous est très malformé.... on ne peut avoir de balise <a> àl'intérieur d'une balise <a>
        </div>
        j'ai pas fait gaffe lors du copié/collé de son code, effectivement.

        Dans mon exemple, le code <a href= ... est utilisé dans le html, en encadrement du bouton 'Programme' (dessiné en css) pour appeler directement la Popup JCEMediaBox, sans utiliser de javascript ...
        Le paramétrage JCEMB est intéressant pour donner du style à la Popup, un peu plus sympa que window.open.

        cependant ton script répond parfaitement à la demande
        Dernière édition par liubov à 13/04/2017, 17h06
        Developper of JBreeding Manager: http://www.jbreeding.fr/
        J-cook Referral : Service Générateur d'Extensions pour Joomla

        Commentaire


        • #5
          Re : Afficher une popup avec un bouton

          voila la liste des classes css associées aux modales :
          C'est une extract direct des fichiers j3.7
          dans le fichier template.css de protostar tu as ceci :

          a adapter et coller en bas du fichier custom.css du template
          /var/www/html/j37/templates/protostar/css/template.css (159,2 KB Fri Mar 31 15:03:51 2017)
          Options: none.
          Line Number: 178
          .rtl .modal-footer button {
          Line Number: 3940
          .modal-backdrop {
          Line Number: 3949
          .modal-backdrop.fade {
          Line Number: 3952
          .modal-backdrop,
          Line Number: 3953
          .modal-backdrop.fade.in {
          Line Number: 3957
          .modal-header {
          Line Number: 3961
          .modal-header .close {
          Line Number: 3964
          .modal-header h3 {
          Line Number: 3968
          .modal-body {
          Line Number: 3974
          .modal-body iframe {
          Line Number: 3979
          .modal-form {
          Line Number: 3982
          .modal-footer {
          Line Number: 3996
          .modal-footer:before,
          Line Number: 3997
          .modal-footer:after {
          Line Number: 4002
          .modal-footer:after {
          Line Number: 4005
          .modal-footer .btn + .btn {
          Line Number: 4009
          .modal-footer .btn-group .btn + .btn {
          Line Number: 4012
          .modal-footer .btn-block + .btn-block {
          Line Number: 4916
          .modal-header .close {
          Line Number: 5811
          body.modal {
          Line Number: 6234
          div.modal {
          Line Number: 6256
          div.modal.fade {
          Line Number: 6263
          div.modal.fade.in {
          Line Number: 6266
          .modal-batch {
          Line Number: 6269
          .modal-body[class^="jviewport-height"],
          Line Number: 6270
          .modal-body[class*="jviewport-height"] {
          Line Number: 6303
          div.modal.jviewport-width10 {
          Line Number: 6307
          div.modal.jviewport-width20 {
          Line Number: 6311
          div.modal.jviewport-width30 {
          Line Number: 6315
          div.modal.jviewport-width40 {
          Line Number: 6319
          div.modal.jviewport-width50 {
          Line Number: 6323
          div.modal.jviewport-width60 {
          Line Number: 6327
          div.modal.jviewport-width70 {
          Line Number: 6331
          div.modal.jviewport-width80 {
          Line Number: 6335
          div.modal.jviewport-width90 {
          Line Number: 6339
          div.modal.jviewport-width100 {
          Line Number: 6344
          div.modal {
          Line Number: 6352
          div.modal.fade {
          Line Number: 6355
          div.modal.fade.in {
          Line Number: 6358
          div.modal[class*="jviewport-width"] {
          Line Number: 6364
          div.modal {
          Line Number: 7502
          .modal.fade {
          Line Number: 7663
          body.modal-open {
          Line Number: 7681
          .field-media-wrapper .modal .modal-body {

          Dans le dossier /templates/system/modal.css tu as ceci :

          var/www/html/j37/media/system/css/modal.css (2,9 KB Fri Mar 31 15:03:51 2017)
          Options: none.
          Line Number: 4
          * Allows to open various content as modal,
          Line Number: 45
          background: url(../images/modal/closebox.png) no-repeat center;
          Line Number: 50
          background-image: url(../images/modal/spinner.gif);
          Line Number: 112
          background: url(../images/modal/bg_n.png) repeat-x;
          Line Number: 117
          background: url(../images/modal/bg_ne.png) no-repeat;
          Line Number: 123
          background: url(../images/modal/bg_e.png) repeat-y;
          Line Number: 128
          background: url(../images/modal/bg_se.png) no-repeat;
          Line Number: 134
          background: url(../images/modal/bg_s.png) repeat-x;
          Line Number: 139
          background: url(../images/modal/bg_sw.png) no-repeat;
          Line Number: 145
          background: url(../images/modal/bg_w.png) repeat-y;
          Line Number: 150
          background: url(../images/modal/bg_nw.png) no-repeat;
          Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
          un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

          Commentaire


          • #6
            Re : Afficher une popup avec un bouton

            Bonsoir,
            Merci beaucoup pour votre aide.
            Effectivement, la balise >a dans la balise <a était une erreur, je ne l'vais même pas remarquée, désolé pour cette erreur.

            La fenêtre qui s'ouvre reste vide (Bien-entendu j'ai contrôlé dans la table si le champ contenant bien quelque chose)

            Cordialement.

            Eric
            Dernière édition par Agrepe à 13/04/2017, 17h39

            Commentaire


            • #7
              Re : Afficher une popup avec un bouton

              As tu testé la valeur de $item->programme avant de l'ouvrir en Popup ?

              Code PHP:
              <?php print_r($item->programme); ?>
              Developper of JBreeding Manager: http://www.jbreeding.fr/
              J-cook Referral : Service Générateur d'Extensions pour Joomla

              Commentaire


              • #8
                Re : Afficher une popup avec un bouton

                Bonsoir,
                Le print_r affiche correctement ce que contient le champ "programme".
                Cordialement.
                Eric

                Commentaire


                • #9
                  Re : Afficher une popup avec un bouton

                  A la lecture de ton source, c'est sûr que ça ne peut pas fonctionner. La fonction Javascript est isolée en haut du source, et ne reçoit aucune valeur. (d'ou fenêtre vide)
                  Code HTML:
                  <script type="text/javascript"> 
                  	function open_infos() 
                  		{ 
                  		window.open('','programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600'); 
                  		} 
                  </script> 
                  Lefabdu51 t'a proposé un script, a placé dans chaque fiche pour pouvoir lui affecter la valeur php de $item->programme.
                  Developper of JBreeding Manager: http://www.jbreeding.fr/
                  J-cook Referral : Service Générateur d'Extensions pour Joomla

                  Commentaire


                  • #10
                    Re : Afficher une popup avec un bouton

                    Bonsoir Liubov,
                    Merci beaucoup pour ton œil avisé.

                    Mais bien-sûr, cela me parait évident.
                    Mais c'est sûr que l'on ne réfléchit pas de la même manière quand on est dans le truc et qu'on tourne ne rond.
                    Je fais cela tout de suite et teste.

                    Merci beaucoup.

                    Cordialement.
                    Eric

                    Commentaire


                    • #11
                      Re : Afficher une popup avec un bouton

                      Il y a du mieux, merci beaucoup.

                      J'ai un message d'erreur juste avant le contenu du programme.

                      Forbidden

                      You don't have permission to access /demos/

                      mais le programme s'affiche bien après ce message

                      Commentaire


                      • #12
                        Re : Afficher une popup avec un bouton

                        Bonjour,
                        J'ai toujours le même souci.
                        Il y a certainement quelque chose qui m'échappe.
                        Un print_r($item->programme);
                        Un echo aussi.
                        Affichent bien ce qu'il faut.

                        Mais la fenêtre qui s'ouvre affiche une Erreur 500
                        Je cherche à comprendre pourquoi cette erreur qui est un erreur du côté serveur si j'ai bien compris.

                        Voici le code:

                        Code PHP:
                        <script type="text/javascript">
                            function open_infos()
                            {        
                                window.open('<?php echo $item->programme?>','Programme','menubar=no, scrollbars=no, top=100, left=100, width=800, height=600');
                            }
                        </script>
                            <div <a class="validate btn btn-primary" onclick="javascript:open_infos();">Programme</a></div>
                        Avez-vous une idée ?

                        Cordialement.

                        Eric

                        Commentaire


                        • #13
                          Re : Afficher une popup avec un bouton

                          Oui, le retour est explicite.
                          de ce que je comprends $item->programme est un contenu 'string' est pas une url. C'est pourtant ce que attend window.open, d'ou l'err 404.

                          Référence Javascript:
                          Code HTML:
                          var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);
                          c'est pourquoi, je t'avais proposé de passer par le fichier programme.php (url) qui se charge de l'affichage du contenu...
                          Developper of JBreeding Manager: http://www.jbreeding.fr/
                          J-cook Referral : Service Générateur d'Extensions pour Joomla

                          Commentaire


                          • #14
                            Re : Afficher une popup avec un bouton

                            Bonjour Liubov,
                            Merci pour ton aide.

                            J'ai regardé cela: https://developer.mozilla.org/fr/doc...PI/Window/open

                            Mais je ne sais toujours pas s'il m'est possible d'afficher la chaîne de caractères dans la popup ?

                            Penses-tu que ce serait possible ?

                            Cordialement.

                            Eric

                            Commentaire


                            • #15
                              Re : Afficher une popup avec un bouton

                              NON, ce n'est pas possible avec cette méthode. Une popup est une fenêtre active du navigateur ouverte via une URL.

                              strUrl
                              Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. strUrl peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.
                              Developper of JBreeding Manager: http://www.jbreeding.fr/
                              J-cook Referral : Service Générateur d'Extensions pour Joomla

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X