28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour ouvrir une fenêtre en css, je la rends visible lorsque le lien a le focus.

Mais comment fermer la fenêtre à l'aide du bouton classique de fermeture, en haut à droite de la fenêtre ,
(Pour l'instant, il faut cliquer en dehors de la fenêtre pour la fermer.)

Merci d'avance pour votre aide
Modifié par cadbor (01 Feb 2014 - 12:55)
Intuitivement, je pense qu'il faut placer le bouton par-dessus la fenêtre et définir pour ce bouton un lien <a href="#Ancre_du_lien_appelant_la fenêtre">.

Est-ce la bonne voie ? (Je dois partir et n'ai pas le temps d'essayer.)
Problème : Comment placer une balise <a href> dans une balise <a href> ?
En modifiant le dtd pour que cette inclusion soit possible ?

(La fenêtre est contenue dans le lien <a href> qui l'appelle. Le dtd html n'accepte pas une balise <a> dans une balise <a>.)

J'ai vu d'autre part qu'il y a une piste en css 3 en utilisant la pseudo-classe :target.
Je vais essayer de voir de ce côté.
Bonjour,

Je reprends le sujet que j'ai laissé en suspens car j'ai maintenant la pratique de la façon de créer une popup appelable par clic.
Par exemple

<a href="#id_de_la_popup target="_parent">Afficher un complément d'information</a>
<aside id="id_de_la_popup">
    <section>
    <!-- contenu de la popup -->
    </section>
    <a href="#Ici_meme"></a>  <!-- Cette balise a href sert à fermer la popup. L'ancre Ici_meme n'existe pas. L'utilisation d'une ancre non définie permet de rester au même endroit de l'affichage -->
</aside>     <-- Le contenu peut être placé dans un conteneur aside, section, div... -->  


aside {
visibility: hidden;
position: absolute;
/* positionnement de la popup */
}

aside:target  {
visibility: visible;  /* La popup devient visible lorsqu'on clique sur le lien */
}

aside  a  {
display: block;
position: absolute;
/* Positionnement du bouton de fermeture */
z-index: 7;   /* valeur plus grande que celle de la popup de façon à ce que le bouton se place au-dessus de la popup */
background: url(chemin_bouton_de_fermeture);
}