背景暗転

by goropoo

HTML

<h2>画像拡大</h2>
<p class="sum"><img src="small.jpg" width="50" height="50" /></p>
<div id="cover" style="position:absolute; top:0; left:0; background:rgba(0, 0, 0, 0.5);"></div>
<p class="big"><img src="big.jpg" width="200" height="200" /></p>

JavaScript

$(function(){

$('p.big').css('display','none');

$('p.sum img').click(function(){    
    if($('p.big').hide('slow')){
        $('p.big').fadeIn('slow');
  }
            $('p.big img').css({    
            'position':'absolute','top':'0','width':'500px'
            })
            
             $('#cover').fadeIn('slow');
            $('#cover').css({     
'width':$(document).width(),'height':$(document).height()
            })        
$('p.big,div#cover').click(function(){    
        $('p.big,div#cover').fadeOut(1000);
    
  });
});   

});