Bonjour

Dans ma page j'ai une image
Code css : 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
.petitportrait{ 
width:58px; 
height:77px;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
}
.grandportrait{ 
width:580px; 
height:770px;
margin-left:150px;
}
#cadre_agrandissement {
  background: white;
  border-style: solid;
  border-color: black;
  position: absolute;
  top: 50px;
  left: 500px;
  width: 0px;
  height: 0px;
}
.fermer a{
font-family: "Arial", "Arial Narrow"; font-size: x-large; font-style: normal; font-weight: normal; color: black; text-align: left; margin-left: auto; margin-right: auto ; margin-top: auto;  margin-bottom: auto;
}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<img id="imageportrait" src="dessin15petit.jpg" class="petitportrait gravure" title="Nu debout, gravure au scotch" alt="Nu debout, gravure au scotch"/>
<div id="cadre_agrandissement"></div>
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
/*agrandissement des images*/
$(function(){
	$('.petitportrait').css('border','5px white solid');	
	$('.petitportrait').on( "click", function(){
		$(this).css('border','5px black solid');
		$('body').css('background-color','blue').css('opacity','0.4');
		var a = $(this).attr('id');	
		var b = $(this).attr('src');
		var c = $(this).attr('title');
		var d = $(this).attr('alt');
		var nom_img = $(this).attr('src');
		var nom1 = nom_img.charAt(0);
		var nom2 = nom_img.charAt(1);
		var e = b.replace('petit.jpg','grand.jpg');
		$('#cadre_agrandissement').html('<span class="fermer"><a id="lien" href="#">Fermer</a></span> <br> <img id="' +a+ '" src="' +e+ '" class="grandportrait" title="' +c+ '" alt="' +d+ '"/> <br> Intitulé: ' +c+ ' ');
		$('#cadre_agrandissement').animate({ 'height':'970px'}, 500).animate({ 'width': '880px'}, 500)
	});
	$('#cadre_agrandissement').on( "click", "#lien", function(){
		$('.petitportrait').css('border','5px white solid');
		$('#cadre_agrandissement').animate({'height' : '0px', 'width' : '0px'}, 500 );
		$('#cadre_agrandissement').empty();
	});	
});
Quand on clic dessus une div s'ouvre dans laquelle l'image est agrandie
Je veux que quand on clic sur l'image un voile bleu d'opacité 0.4 recouvre ma fenêtre excepté le cadre agrandissement
J'ai essayé
Code : Sélectionner tout - Visualiser dans une fenêtre à part
$('body').css('background-color','blue').css('opacity','0.4');
mais toute ma fenetre y comprit la cadre est recouvert par ce voile
Avez vous une astuce?
Cordialement