gérer le scroll sur une pop-up de type confirm

**Sh4dow49** · 12/05/2009, 14h17

Bonjour,

Voila j'affiche une pop-up de type confirm via l'événement onsubmit d'un formulaire html.

Ce confirm affiche un texte et l'utilisateur décide ou non donc d'envoyer ou de remodifier les infos saisies avant l'envoie.

Seulement, la liste affichée est parfois tellement longue que la fenêtre confirm est trop grande pour l'écran et on ne peut donc pas voir les boutons "ok" et "annuler"

Je voudrais donc scroller cette liste dans la fenêtre confirm.

Est-ce possible ou pas ? Si oui comment faire ? car je ne trouve pas grand chose de mon côté ...

Merci d'avance

**SpaceFrog** · 12/05/2009, 14h26

je n'ai jamais vu de fenetre confirm avec un scroll ????

**Sh4dow49** · 12/05/2009, 14h28

Ben justement c'est pour ça que je demande si c'est possible à faire ^^

Je n'en ai jamais vu non plus mais comme je ne connais pas grand chose au javascript je demande quand même pour le cas ou

**SpaceFrog** · 12/05/2009, 14h29

Ha ... ok
Donc je confirme , non sauf émuler soi même sa fenetre confirm avec un div ...

**Sh4dow49** · 12/05/2009, 14h30

Et c'est compliqué à faire ou pas ?

Est-ce que t'aurais un exemple de code ou quelque chose pour voir ce que ça donne à mettre en place ?

**SpaceFrog** · 12/05/2009, 14h33

Il existe des librairies toutes faites de type walterzon ou window prototype de xilinus ...

sinon tu peux partir sur un truc du style:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
 
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <title>X</title>
   <style type="text/css">
   .titlebar{font-size:11px;
         font-family:verdana;
         color:white;
         font-weight:bold;
         width:100%;
         background-color:Darkslateblue;
         padding:2px;
         text-align:left;
         }
 
   .msgbox{border:outset 2px white;
         background-color:gainsboro;
         width:300px;
         height:180px;
         color:black;
         padding-left:1px;
         padding-right:2px;
         padding-top:1px;
         font-family: verdana;
         font-size:11px;
         text-align:center
           }
   .cross{border:outset 2px white;
         background-color:gainsboro;
         left:2px;
         width:18px;
         color:black;
          font-family:tahoma;
          float:right;
          margin-top:0px;
          padding-left:4px;
          padding-bottom:2px;
          padding-top:1px;
          top:0px;
          line-height:10px;
          cursor:default;
          }
   .bouton{width:80px;
         height:25px;
         border:oustet 2px silver;
         position:relative;
         font-size:11px;
         font-family: tahoma;
         }
 
   .innerText{width:100%;
          padding-left:30px;
          text-align:left;
          }       
 
   #testzone {position:absolute;
            top:100px;
            left:200px;
            }
   </style>
 
 <script type='text/javascript'>
 /************************************************
  Brought to you form the other end of the galaxy 
                  By SpaceFrog 
 *************************************************/                  
   function MyAlert($texte){
 
            msg=$texte
            document.getElementById('testzonetext').innerHTML=document.getElementById('texte').value;
 
            document.getElementById('trap1').value=document.getElementById('bouton1').value;
            document.getElementById('trap2').value=document.getElementById('bouton2').value;
            document.getElementById('menutitre').innerHTML=document.getElementById('titre').value
 
            document.getElementById('testzone').style.display='block';
            }      
 
 
 function buttonaction(buttonid){
         switch (buttonid){
         			case('trap1') :  alert("vous avez appuyé sur le bouton " + document.getElementById('trap1').value +" !" );
         								break;
         			case('trap2') :  alert("vous avez appuyé sur le bouton " + document.getElementById('trap2').value +" !" );
         								break;
         								}
       }
 
 
    </script>
</head>
<body>
Titre        <input type="text" id='titre' size="20" maxlength="40" />
Texte        <input type="text" id='texte' size="20" maxlength="40" />
Bouton	1		<input type="text" id='bouton1' size="20" maxlength="40" />
Bouton	2		<input type="text" id='bouton2' size="20" maxlength="40" />
 
			  <input type="button" onclick="MyAlert();"	  value="alerte"/>       
 
 
		<div id='testzone' class="msgbox" style="display:none;" >
				<div class="titlebar" >
					<div id='menutitre' style="float:left"></div>	
				  	<div class="cross" onclick="document.getElementById('testzone').style.display='none';">X</div>
 				</div>
 
				<br/>
				<br/>
				<br/>
				<div class='innerText' id='testzonetext'>	</div>
				<br/>
				<br/>
				<br/>
				<div>
					<input type="button" id="trap1" value="OK" class="bouton" onclick="document.getElementById('testzone').style.display='none';buttonaction(this.id)" style="left:0px;"/><input type="button" id="trap2" value="OK" class="bouton" onclick="document.getElementById('testzone').style.display='none';;buttonaction(this.id)" style="left:0px;"/><br/>
				</div>
 
		</div>
</body>
</html>

**Sh4dow49** · 12/05/2009, 14h45

plutot sympa comme code. Mais je vais regarder aussi du côté des librairies que tu m'as proposé pour voir (quand j'aurai du temps !)

Je vais raccourcir la liste en attendant de trouver mieux.

Merci pour tes réponses

gérer le scroll sur une pop-up de type confirm

JavaScript

Discussions similaires

Partager

Partager