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

      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;

          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
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X