Bonjour,
J'ai développé un site web dans lequel j'ai intégré une div, remplie à la volée en ajax et qui apparait comme une fenêtre modale lorsqu'on clique sur un lien.
Mon problème est que si on est en bas de la page, cela provoque un retour en haut de page, ce qui oblige à revenir au point où on en était avant de cliquer sur le lien et est même un peu perturbant.
Le mieux est de voir par vous-même:
http://www.polebio.lrsv.ups-tlse.fr/.../searchfortest (déjà là le problème existe, bien que moins génant).
Dans le menu déroulant laisser sur All. Cases de la colonne du milieu: choisir Brachypodium (2eme case). Cases de la colonne de droite: choisir Leaves (9eme case), puis cliquer sur search. Cela affiche un tableau contenant des *.
Scroller en bas du tableau (ou mieux tout afficher et cliquer sur une * de la dernière ligne) et là vous comprendrez pourquoi l'utilisateur risque d'être un peu surpris...
Le script simplifié:
Dans le body:
Code : 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
34
35 function pop_up(xml,uid,label){ var url = "http://www.polebio.lrsv.ups-tlse.fr/WallProtDB//index.php/searchfortest/modal2/"+xml+'/'+uid+'/'+label $.post(url, function(data) { data+='<br /><br /><input type="button" value="close" onclick="close_cd()">'; $('#overlay_form').html(data); //Setting the content of html }); //open popup $("#overlay_form").fadeIn(1000); //Recuperer les coordonnees de la souris quand on clique sur un lien (*) du datatable, afin d'afficher la fenetre modale la ou on a cliqué $("#searchTable").click(function(e){ X=e.pageX; Y=e.pageY; positionPopup(X,Y); }) } function positionPopup(X,Y){ if(!$("#overlay_form").is(':visible')){ return; } $("#overlay_form").css({ position:'absolute', left:X, top:Y }); } function close_cd(){ $("#overlay_form").fadeOut(500); //Closing the opened window }
Pour chaque * du tableau on a:
Et pour finir, un div unique qui se remplit et se positionne selon le lien qu'on a cliqué.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <a href="#" onclick="pop_up('xmlfile','id','nameOfSequence')">*</a>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <div id="overlay_form" style="display:none;"></div>
Voilà, si quelqu'un a une solution ou un lien vers une méthode plus fonctionnelle, je suis preneur !
Merci beaucoup,
Sohnic
Partager