ModalBox et URL

Bonjour à tous,

J'ai souvent eu l'occasion de lire et apprendre sur Alsacréations (au passage un gros merci, ultra utile pour un débutant comme moi), mais je suis tout fraîchement inscrit sur le forum.

Je poste aujourd'hui un message concernant les url et l'utilisation d'une modal-box en css.

Voici un exemple:

<div class="modal" id="test">
  <div class="box">
    <a class="close" href="#fermeture">fermer</a>   
    <div class="contenu">
    text/photos/etc  
    </div>
  </div>
</div>

<a href="#test">Fenêtre</a>

qui donne:

page: page_du_site.fr
modal ouverte: page_du_site.fr/test
fermeture modal: page_du_site.fr/#fermeture

Si je comprends bien, la page en question est accessible via 2 url :
.page_du_site.fr
page_du_site.fr/#fermeture

Quelles seraient les solutions pour fermer la modal correctement, ou éviter des pages/contenu dupliqués ou liens vides ?

par exemple:

<a class="close" href="www.page_du_site.fr">fermer</a>

<a class="close" href="">fermer</a>

<a class="close" href="modale fermée">fermer</a>

Merci pour vos explications,
Modifié par bochinchero (18 Aug 2014 - 17:02)

Bonjour,

La question étant "Comment fermer...",
et comme la question "Comment rouvrir..." n'a pas "encore été posée,
pour fermer, la solution javascript suivante fonctionne (événement sur le lien) :

onclick="document.querySelector('.box').style.display = 'none'"

et pour éviter un lien vide ou une page dupliquée, mettre href="#",

Mais personnellement :
- j'attribuerais plutôt un id à la box à fermer, et j'utiliserais getElementById à la place de querySelector.
- j'utiliserais plutôt un élément span ou div à la place du lien, ce qui éviterait d'ajouter l'attribut href.

a écrit :
- j'utiliserais plutôt un élément span ou div à la place du lien, ce qui éviterait d'ajouter l'attribut href.

C'est mauvais pour l'accessibilité, à éviter si possible.

J'ai peur de dire une bêtise, mais est-ce que les moteurs de recherche n'en auraient tout simplement rien à cirer de ce qui vient après le #, vu que c'est une ancre qui n'est normalement pas interprétée côté serveur (à comprendre dans le sens page#aaa et page#bbb ouvre nécessairement la même page, le même fichier) ?
Si ce que je dis est vrai, alors on se fiche totalement si deux URL qui ne diffèrent qu'après le # donnent le même contenu.
Modifié par QuentinC (18 Aug 2014 - 20:40)

Bonsoir,

Merci pour vos réponses, en fait d'après ce que je viens de comprendre comme le dit QuentinC (je dis peut être une bêtise aussi) mais ce qui vient après le # semble ne pas être pris en compte par les moteurs.

Donc pas de risque de contenu dupliqué.

Bonjour,

En ce qui concerne l'attribut href de l'élément a, j'ai testé avec IE11, Google Chrome et Firefox.

Si l'attribut href est vide (href=""), ça fonctionne correctement avec Google Chrome, mais avec IE, le contenu de la page est modifié.
Si href="#", le fonctionnement est OK avec les trois navigateurs.
Si l'attribut href est absent, le lien n'est pas "bleu", donc la remarque de QuentinC sur l'accessibilité s'applique : on peut à priori palier à ce problème avec css, mais je ne suis pas un expert de l'accessibilité web...