Another approach: copy user-profile.tpl.php to your theme folder and modify like this:
<?php
global $user;
$imgAvatarFid = isset($user->picture) ? $user->picture : NULL;
if($imgAvatarFid != NULL) {
$imgAvatarFile = file_load($imgAvatarFid);
$imAvatar = image_style_url('large', $imgAvatarFile->uri);
}
?>
<div class="profile"<?php print $attributes; ?>>
<?php print render($user_profile); ?>
</div>
<?php if($imgAvatarFid != NULL): ?>
<div class="imgAvatarPop">
<div class="close">
<span>Close</span>
</div>
<div class="imgAvatar">
<img src="<?php print $imAvatar; ?>" />
</div>
</div>
<?php endif; ?>
and in your css file add:
.imgAvatarPop {
display: none;
position: absolute;
left: 30%;
top: 25%;
}
and in your JS file:
$('.profile > .user-picture > a').click(function() {
$('.imgAvatarPop').css({display: 'block'});
return false;
});
$('.close span').click(function() {
$('.imgAvatarPop').css({display: 'none'});
});
if you want you can customize this. Or even you can add overlay to page.tpl.php and show it on user-picture click.