Afficher une popup avec un bouton

[Agrepe]

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.

<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(' ??? ','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

[liubov]

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:

<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)

<a href="programme.php" target="_blank" class="jcepopup" data-mediabox-caption="Programme" data-mediabox-title="Programme">

[lefabdu51]

Re : Afficher une popup avec un bouton

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>

<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>

[liubov]

Re : Afficher une popup avec un bouton

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

[lefabdu51]

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;

[Agrepe]

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

[liubov]

Re : Afficher une popup avec un bouton

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

<?php print_r($item->programme); ?>

[Agrepe]

Re : Afficher une popup avec un bouton

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

[liubov]

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)

<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.

[Agrepe]

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

[Agrepe]

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

[Agrepe]

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:

<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

[liubov]

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:

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...

[Agrepe]

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

[liubov]

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.