angularjs点击图片放大显示，点击关闭缩小显示

HTML代码

 

<ul class="clearfix">
				<li>
					<h3>身份证正面照片</h3>
					<div>
						<img ng-click="changePic($event)"  ng-src="showImg/{{personInfos.dealer.idCardFace}}" />
					</div>
				</li>
				<li>
					<h3>身份证反面照片</h3>
					<div>
						<img ng-click="changePic($event)" ng-src="showImg/{{personInfos.dealer.idCardBack}}" />
					</div>
				</li>
			</ul>

 

 

<div id="js-imgview-mask" class="imgview-mask" style="display: none;" ng-click="closePic()">//黑盒子
</div>
<div id="js-imgview" class="show-img">//显示的图片
	<img id="bigimage">
	<a ng-click="closePic()">X</a>
</div>

JS代码

 

//点击图片时放大显示图片
    $scope.changePic=function($event){
    	var img=$event.srcElement || $event.target;
    	angular.element("#bigimage")[0].src=img.src;
    	angular.element("#js-imgview")[0].style.display="block";
    	angular.element("#js-imgview-mask")[0].style.display="block";
    }
  //点击图片时放小显示图片
    $scope.closePic =function(){
    	angular.element("#js-imgview")[0].style.display="none";
    	angular.element("#js-imgview-mask")[0].style.display="none";
    	
    }

CSS代码

 

/* 图片放大的代码 */
.imgview-mask{
	position: fixed;
    height: 100%;
    width: 100%;
    z-index: 999998;
    left: 0;
    top: 0;
    background: #000;
    opacity: .75;
    filter: alpha(opacity=75);
    display: none;
}
.show-img{
	position: fixed;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -100px;
    background: #fff;
    z-index: 999999;
    width: 900px; 
    height: 666px;
    margin-left: -450px;
    margin-top: -333px;
    display: none;
}
.show-img img{
	width: 900px; 
    height: 666px;
}
.show-img a{
	position: absolute;
    width: 40px;
    height: 40px;
    right: -40px;
    top: -40px;
    background: url(../image/index-close.png) -10px -10px no-repeat;
}
.show-img a:hover{
	position: absolute;
    width: 40px;
    height: 40px;
    right: -40px;
    top: -40px;
    background: url(../image/index-close.png) -10px -77px no-repeat;
}