Affichage fenêtre modale durant traitement

**Arsene12** · 27/06/2017, 07h12

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é · 27/06/2017, 07h55

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** · 27/06/2017, 08h24

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** · 27/06/2017, 09h40

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** · 27/06/2017, 10h19

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** · 27/06/2017, 10h38

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

**Arsene12** · 27/06/2017, 11h11

Il me faudrait un plein écran. Mon problème est que je n'arrive pas à fermer la fenêtre modale :

Code :

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

1
2
3
4
5
6
7
8
9
10
        
 while (arg1<= arg2) {
             maFonction(arg1,arg2);
             arg1++;               
             if (arg1===arg2) {
                 n=1;
                $("#fenModale").hide();   
           ou     $("#fenModale").remove();   
             }; 
      };

J'y arrive sur fiddle

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

mais pas dans mon appli car le code est différent. Il ressemble plus à cet exemple ou la fenêtre modale n'apparais qu'après le traitement alors que je voudrais la voir apparaitre pendant le traitement et disparaitre une fois ce dernier terminé.

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

code HTMl:

Code :

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

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

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
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
 
#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------------------------*/
 
 
#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

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
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
  $("#Treatment").on("click", function () { 
 
  $('#fond, .popup').show();
 
  maFonction ();
 
 function maFonction () {
 var i = 1; 
 
 $('#Div2').show(000,function(){ 
 $("#Div1").hide(000,function(){      
 //alert("Ok");
 
 while (i<=1200000) {
 
 $('#Div2').text(i); 
 if (i===1200000) { 
 $('#fade').remove(); 
 }
 i++; 
 };
 
 
});
});
};
 
});
 
 
jQuery(function($){
 
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur
 
		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //...ils disparaissent ensemble
 
		return false;
	});
 
 
});

Affichage fenêtre modale durant traitement

jQuery

Discussions similaires

Partager

Partager