Discussion :

[noradan]

bonjour
j'ai un lien sur ma page et j'aimerais qu'au clic s'ouvre un popup ou quelque chose de ce genre avec un avertissement, puis que cette "chose" cède la main au lien après quelques secondes.

Je n'ai pas la moindre idée de la façon dont ça peut se faire.
Merci pour toute indication

[casperweb]

Bonjour, ce que vous souhaitez c'est une modale, faite une recherche sur ce terme. Il en existe full CSS ou avec du JavaScript.

En HTML il existe le popover voir https://developer.mozilla.org/fr/doc...ibutes/popover

Si il y a une notion de timer qui doit intervenir c'est en JS. Cette notion n'existe pas en HTML.

[Édit] https://jolicode.com/blog/une-fenetre-modale-accessible
https://www.accede-web.com/notices/i...etres-modales/

[noradan]

Ok e vais aller voir

Ceci n'est-il pas un timer

<meta http-equiv="refresh" content="0;

Je l'utilise pour ouvrir immédiatement un autre fichier, mais content est une valeur en seconde si je me souviens bien

[casperweb]

Bonjour, j'avais oublié cette balise que je n'utilise pas (j'utilise les redirections en PHP). Oui la valeur de content est bien un temps en seconde.
Mais pourquoi faire charger une page au client si c'est pour recharger une autre immédiatement (à zéro seconde après le chargement), autant rediriger vers la bonne ressource immédiatement. Cela accélère le chargement de page en limitant la consommation de données transmises et le nombre de connexion http.

Il y à plusieurs inconvénients en plus de ceux déjà cités :

• Il n'y a pas de possibilité de choisir une condition autre que le chargement de page (évènement load)
• L'utilisateur ne peut agir sur ce "timer", il le subit, il ne peut être déclenché sur action de l'utilisateur .
• Cela engendre des problèmes d'accessibilité tel que décrit dans la doc MDN.

[Doksuri]

sinon, pourquoi ne pas utiliser l'element HTML dialog prevu a cet effet ? developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/dialog

tu peux, en JS l'ouvrir avec showModal() et la fermer avec close(), le tout couple avec un setTimeout() devrait faire l'affaire

[Stellar7]

Note : si on prend en compte l'accessibilité, il ne doit pas y avoir de timeout, ou alors contrôlable par l'utilisateur.
Au passage, la modale doit rester étanche à la navigation (cliquer ailleurs ne fait rien, et on ne peut pas tabuler en dehors).

[noradan]

En fait cette redirection est une scorie. C'est le fichier index ! J'en profite pour y écrire les modifications apportés au site (sorte de journal de bord) comme "personne" ne peut le lire ça reste privé !
Il redirige vers un autre qui est ma vraie page d'accueil.
Je l'ai laissé par flemme pour ne pas changer des noms de fichiers dans des liens qui datent de mes premiers balbutiements en html.

Doksuri

sinon, pourquoi ne pas utiliser l'element HTML dialog prevu a cet effet ?

Je n'ai rien contre !! Je n'ai aucune idée de la façon dont m'y prendre donc pourquoi pas "dialog".
Cela étant <dialog> m'a l'air d'être vraiment un boîte de dialogue (du moins tous les exemples que je lis) et ce n'est pas exactement ce que je souhaite.
Je voudrais avoir un lien <a> normal (dans la pratique un texte) mais qui ouvre un modale quand on y clique puis au moment du close() active le lien.
Le timer est accessoire; un clic sur un "fermer/close" me va aussi.
Vraiment un avertissement avant ouverture du lien. du genre "cette vidéo est interdite aux mineurs !" (je vous rassure ce n'est pas le cas du tout !

JS me fait peur car je n'ai jamais pratiqué cette chose. J'ai déjà été obligé d'apprendre le html/css, le php, le sql ...
Je serai peut-être obligé de me mettre à java mais pour le moment j'aimerais rester dans des langues que je baragouine un petit peu !
Cela dis si vous avez des copier/coller à me proposer...

[Doksuri]

exemple le plus basique

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#">lien pour adultes</a>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function showWarning(url) {
    const dialog = document.createElement('dialog');
    document.body.append(dialog);
 
    const msg = document.createElement('div');
    msg.textContent = `attention, c'est pour adultes !`;
    dialog.append(msg);
 
    const btnCancel = document.createElement('button');
    btnCancel.textContent = 'cancel';
    dialog.append(btnCancel);
 
    const btnConfirm = document.createElement('button');
    btnConfirm.textContent = 'go !';
    dialog.append(btnConfirm);
 
    dialog.showModal();
    btnCancel.addEventListener('click', () => {
        dialog.remove();
    }, {once: true});
 
    btnConfirm.addEventListener('click', () => {
        dialog.remove();
        open(url, '_self');
    }, {once: true});
}
 
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('pointerdown', e => {
        e.preventDefault();
        showWarning(link.href);
    });
});

[noradan]

merci
je vais essayer de mettre ça en oeuvre
en fait c'est pour un lien vers music-apple amazon music ou autre youtube histoire de rappeler que
"Les groupes ont besoin de vous pour vivre !
Si vous aimez leur musique, achetez-la !"

ou un truc du genre

Quand j'aurai un petit moment il faudra peut-être que je me mette à java. Il y a peut-être des choses intéressantes pour mon très modeste usage

[Doksuri]

Quand j'aurai un petit moment il faudra peut-être que je me mette à java.

attention : java != javascript