Discussion :

[basket]

Bonjour,

J'ai créé un popup avec des div et JQuery, à l'image de l'exemple sur le lien suivant :
http://yensdesign.com/2008/09/how-to...-using-jquery/

Seulement, j'ai un comportement qui ne me plait pas. Lorsque l'on appuie sur Echappement, la div disparait bien, mais le scroll remonte en haut de page, ce qui est particulièrement énervant lorsqu'on a une longue liste (j'ai bien de la pagination, le nombre de lignes à afficher est modifiable).

A quoi faut-il faire attention pour avoir un comportement plus logique, à savoir que la popup disparait mais la page "en dessous" reste au même endroit ?

Faut-il positionner les div à un endroit particulier ? quoi d'autre ?

Pour info, mon css pour les deux div concernées :

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
.popupBack {
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6*/
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color: #555;
  background-color: rgba(0,0,0, 0.5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  IE 8
  z-index:150;
}
 
.popupFront {
  display:none;
  position:fixed;
  _position:absolute; /* hack pour internet 6 */
  z-index:200;
  width: 350px;
  margin:auto;
  border-style: solid;
  border-width:5px;
  background-color: #FFF;
  background-color:rgba(255,255,255,.9);
  border-color:#FFB040;
  border-color:rgba(255,176,64, .9);
  padding: 20px;
  cursor:move;
  font-size: 1em;
}

Ainsi que le Javascript utile :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script type="text/javascript">
function showConfirm() {
  $("#idPopFront").show();//css({"display": "block"});
  $("#idPopBack").show();//css({"display": "block"});
}
 
function hideConfirm(id) {
  $("#idPopBack").hide();//css({"display": "none"});
  $("#idPopFront").hide();//css({"display": "none"});
  $("#id").removeAttr("value");
  $("#action_lien").removeAttr("value");
}
 
//centering popup
function centerPopup(){
  //request data for centering
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $("#idPopFront").height();
  var popupWidth = $("#idPopFront").width();
  //centering
  $("#idPopFront").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
  });
  //only need force for IE6
 
  $("#idPopFront").css({
    "height": windowHeight
  });
 
}
 
 
//CONTROLLING EVENTS IN jQuery
  $(document).ready(function(){
    //CLOSING POPUP
    //Click the x event!
    $("#annulerConfirm").click(function(){
      hideConfirm();
    });
 
    //Press Escape event!
    $(document).keypress(function(e){
      if(e.keyCode==27){
        hideConfirm();
      }
    });
 
    $("#validerConfirm").click(function() {
      $("#formSupp").submit();
    })
 
    $(".suppIndex").click(function(f) {
      var id = $(this).attr("id").substr(5);
      var texte = $(this).attr("value");
      $("#messageSupprimer").html("Êtes-vous certain de vouloir supprimer " +
        " " + texte + " ?");
      $("#id").removeAttr("value");
      $("#id").attr("value", id);
      $("#action_lien").removeAttr("value");
      $("#action_lien").attr("value", "confirmerSupprimer");
 
      centerPopup();
      showConfirm();
    });
 
  });
 
</script>

Merci d'avance pour vos avis éclairés.

[Bovino]

Etant donné le symptôme, on peut imaginer que la popup est lancée depuis le clic sur un lien dont le href serait "#" et qui n'est pas inhibé (return false sur le onclick).

[basket]

Merci c'est ça !
Bon, mon code a des bugs par ailleurs, mais au moins ce point est-il débloqué.