Creer un lien vers un point d'ancrage "enfant"
Bonjour !
Comme indiqué dans mon titre, je me trouve en ce moment face à un casse-tête concernant des points d'ancrage.
Pour le site d'un institut de "formation spirituelle", j'ai crée un lexique sous forme de div modale (qui s'affiche donc par un lien avec point d'ancrage correspondant à l'ID de la div modale).
Ce que je fais
Le code pour mes liens vers la div modale :
<a href="#definition" data-toggle="modal" data-target="#madivmodale" alt="Lexique"> Lien </a>Le code de la div modale :
<div class="portfolio-modal modal fade" id="madivmodale" tabindex="-1" role="dialog" aria-hidden="true" >
<div id="content-sliderstart">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="z-index: 1450 !important;">
<div class="modal-body">
<div id="definition">
[ Le contenu ]
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal" style="color: #FFF;"><i class="fa fa-times"></i> Fermer</button>
</div>
</div>
</div>
</div>
</div>
</div>Et côté js, je ne copie pas, le code parce qu'il me semble trè slong (et que je ne maîtrise pas le js), mais j'utilise simplement un template bootstrap, donc c'est le code contenu dans le fichier classique boostrapmin.js
Ce que je veux
Pour rendre le lexique plus efficace, j'ai crée un id pour chacune des définitions présentes à l'intérieur.
L'idée étant de créer un lien sur un mot dans le corps de texte, qui renverrait directement à la définition correspondant au mot, au sein de la div modale.
En somme, j'aimerai créer un lien qui renverrai vers un id dans un id...
Une idée de comment je pourrai m'y prendre ?
Ce que j'obtiens
Je pensais avoir trouvé la solution en jouant avec l'attribut href et l'attribut data-target (qui permet également d'afficher la div par le biais de son id).
Donc je pensais qu'en activant la div modale avec le data-target, je pouvais ensuite "naviguer" dedans en utilisant le href, mais ça ne fonctionne pas, la div modale s'affiche quand même en haut de page... :/
Merci d'avance pour vos réponses !
4 réponses
Salut !
Les definitions sont stockées dans la div modale (tout ce qui est résumé par [Le contenu] ) :
<div class="portfolio-modal modal fade" id="madivmodale" tabindex="-1" role="dialog" aria-hidden="true" >
<div id="content-sliderstart">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="z-index: 1450 !important;">
<div class="modal-body">
<div id="definition">
[ Le contenu ]
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal" style="color: #FFF;"><i class="fa fa-times"></i> Fermer</button>
</div>
</div>
</div>
</div>
</div>
</div>ca serais peut être pas mal de créer un fichier js contenant simplement un tableau associatif dans lequel sont stockés toutes les définitions par exemple
var dictionnaire = { "mot1" : definition mot1, "mot2" : definition mot2,.... };ensuite une boucle pour générer le contenu de ton modal
//recupère le container de définition
var container = document.getElementById('definition');
//on parcours le tableau
for(var key in dictionnaire){
//récupère le mot
var mot = key ;
//récupère la définition
var definition = dictionnaire[key];
//on crée la div dans le container
var div1 = document.createElement('div');
div1.id =mot;
var p1 = document.createElement('p');
p1.textContent = mot;
var p2= document.createElement('p');
p2.textContent = definition;
div1.appendChild(p1);
div1.appendChild(p2);
container.appendChild(div1);
}et après soit tu refais une boucle pour générer tes liens soit tu le fait à la main avec en attribut href "#mot"
En espérant que ca puisse t'aider un peu ^^
I am really happy to say it’s an interesting post to read. I learn new information from your article , you are doing a great job. Keep it up