Discussion :

[Arsene12]

Bonjour, je souhaiterai afficher une fenêtre modale durant l'exécution d'un fonction. Pourriez-vous m'y aider à l'aide de ces exemples :

https://jsfiddle.net/0754hamv/6/

https://jsfiddle.net/0754hamv/5/

https://jsfiddle.net/0754hamv/8/

https://jsfiddle.net/0754hamv/9/

Merci d'avance,

Arsène

[Invité]

Bonjour,

je ne pense pas que ce soit à nous de deviner ce que tu veux faire, mais plutôt à toi de nous donner suffisamment d'explications, non ?

4 scripts, sans le moindre commentaire... c'est abuser...

[Arsene12]

Tout est dit dans la première phrase. Quand on clique sur un lien on comprend de suite ce que je veux faire : Afficher une fenêtre modale durant l’exécution d'une fonction par simple clic.

code JS (Jquery) :

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
 $("#Treatment").on("click", function () { 
 
  $('#fond, .popup').show();
 
  maFonction ($('#fond, .popup').hide());
 
 function maFonction () {
 var i = 1;
 $('#Div2').show(000,function(){ 
 $("#Div1").hide(000,function(){      
 //alert("Ok");
 
 while (i<1100000) {
 
 $('#Div2').text(i);
 i++;
 
 };
 
 
});
});
};
 
});

Code CSS :

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
#Div1 {
    background-color: black;
    height: 100px;
    margin: 100px;
    width: 100px;    
}
 
#Div2 {
    background-color: green;
    height: 100px;
    margin: 100px;
    width: 100px;
    color:yellow;
}
 
 
/*------------------POPUPS------------------------*/
#fond {
   position:absolute;
   z-index:9000;
   background-color:darkgoldenrod;
   display:none;
   border-radius: 10px;
}
 
.popup {
   position:fixed;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: white;
   border: 1px solid grey;
}
 
#modal {
   width:300px;
   height:200px;
}
 
/*------------------FIN DE LA POPUPS------------------------*/

code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<input id="Treatment" type="button" onclick="$();" value="Treatment" />
 <div id="modal" class="popup"></div>  
<div id="Div1">      
</div>
 
<div id="Div2">  
 
</div>

[paoli121]

Moi j'arrive pas a te comprendre très bien. Mais si c'est ce que je pense dans ton script js change cette partie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
while (i<1100000) {
 
 $('#Div2').text(i);
 i++;
 
 };

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('#Div2').text(i);
var p = setInterval(function(){
	if (i<1100000) {
		i++;
		$('#Div2').text(i);
	}
	else{
		clearInterval(p);
	}
},500)

FIN EXECUTE VOIR

[Arsene12]

Merci beaucoup, c'est exactement ce que je voulais faire. L'idée était de recouvrir l'écran d'une fenêtre modale transparente durant le traitement afin d'empêcher de cliquer sur les boutons.

https://jsfiddle.net/0754hamv/13/

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
  $("#Treatment").on("click", function () { 
 
  $('#fond, .popup').show();
 
  maFonction ();
 
 function maFonction () {
 var i = 1;
 $('#Div2').show(000,function(){ 
 $("#Div1").hide(000,function(){      
 //alert("Ok");
 
$('#Div2').text(i);
var p = setInterval(function(){
	if (i<11) {
		i++;
		$('#Div2').text(i);
	}
	else{
		clearInterval(p);
    $('#fond, .popup').hide();
	}
},500)
 
 
});
});
};
 
});

Code CSS :

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
#Div1 {
    background-color: black;
    height: 100px;
    margin: 100px;
    width: 100px;    
}
 
#Div2 {
    background-color: green;
    height: 100px;
    margin: 100px;
    width: 100px;
    color:yellow;
}
 
 
/*------------------POPUPS------------------------*/
#fond {
   position:absolute;
   z-index:9000;
   background-color:darkgoldenrod;
   display:none;
   border-radius: 10px;
}
 
.popup {
   position:fixed;
   top:0;
   width:440px;
   height:200px;
   display:none;
   z-index:9999;
   padding:20px;
   border-radius: 10px;
   background-color: transparent;
   border: 1px solid grey;
}
 
#modal {
   width:300px;
   height:200px;
}
 
/*------------------FIN DE LA POPUPS------------------------*/

Mais dans l'application que je crée, la fonction est un peu plus compliquée et je n'arrive pas à appliquer cette méthode. En auriez-vous une meilleure?

[paoli121]

il y a plusieurs manière de le faire. Il y a pour plein écran ou uniquement dans la zone où sont les elements du form


FIN EXECUTE VOIR