28172 sujets

CSS et mise en forme, CSS3

Dans mon précédent post (ici), j'indique comment appeler une popup par un clic lorsque la popup est positionnée en mode absolu.

Je voudrais aussi pouvoir appeler une popup en mode relatif sans que l'affichage de la popup se fasse en haut de l'écran :

[ texte précédant le lien ]
lien vers la popup
popup affichée à proximité du lien qui reste à la même place

Avez-vous une piste ?
Merci d'avance pour toute aide.
Bonjour,
Je pense que vous voulez plutot parler d'une popin...
Le sujet m'intéresse aussi. Je n'ai pas trop creusé car la solution css qui me vient à l'esprit implique que le html de la popin vienne ditectement après le lien d'appel... (position relative pour le lien, position absolute pour la fenettre, lui permettant ainsi de se caler sur le lien)...
Modifié par Olivier C (04 Mar 2014 - 11:23)
Position fixed par rapport à l'écran et non au contenu ? Ca évite de remonter (ou de descendre), ça marche où que soit le lien et la div devant apparaître. Smiley lol
@Olivier

Le lien est bien dans un conteneur positionné en relatif.
La fenêtre appelée est positionnée en absolu par rapport au conteneur contenant le lien.
La fenêtre suit donc bien le lien.

Le problème est que lorsque je clique sur le lien, le conteneur qui le contient remonte en haut d'écran et donc la fenêtre appelée.

@Lothindil

J'ai en premier essayé de positionner la fenêtre appelée en fixed.
Mais comme la page source est longue — il s'agit d'une liste de réalisations — et que les fenêtres appelées sont elles-mêmes longues — il s'agit de tables des matières détaillées —, l'ensemble n'est pas confortable.

C'est pour cela que je préfère une fenêtre ancrée au lien.
Et c'est pour cela que j'aimerais que le lien et la fenêtre qui lui est associée ne remontent pas en haut de page. Smiley smile
Lothindil a écrit :
Position fixed par rapport à l'écran et non au contenu ? Ca évite de remonter (ou de descendre), ça marche où que soit le lien et la div devant apparaître. Smiley lol

Ha oui ! Merci ! Je ne sais pas pourquoi je n'y ai pas pensé...

Mon exemple en live ici (onglet "jQuery" puis bouton "Fenêtre popin").

Edit : à n'utiliser que sur une popin réduite en hauteur, sinon il y aura un problème de srcoll sur les petites résolutions.
Modifié par Olivier C (06 Mar 2014 - 12:48)