PC端图片点击放大

HTML

           <div class="result_bigimg">
                <img id="real" src="<?=$img[0]?>" alt="" title="" height="300" οnclick="max()" />
                <p id="enlarge" class="enlarge">放大显示图像</p>
            </div>
            
            <div class="motai" id="mo">
                <span class="close" id="close">×</span>
                <img class="motaiimg" id="moimg">
                <div id="caption"></div>
            </div>

CSS

.result_bigimg{width:450px;height:300px;background:#fff;position:relative;}
.result_bigimg img{display:block;width:100%;height:100%;margin:0 auto;}

.result_bigimg .enlarge{
    width:450px;
    height:300px;
    position:absolute;
    font-size:20px;
    color:#fff;
    text-align:center;
    line-height:300px;
    background:rgba(0,0,0,0.5);
    top:0;
    display:none;
    cursor:pointer;
}
.result_bigimg:hover #enlarge{display:block;}

#mo{
  display: none;/*隐藏*/
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  top: 0px;
  left: 0px;
  z-index: 1;
}
#mo:hover{cursor:url(../images/cursorjian.png),auto;}
#moimg{
  display: block;
  margin:170px auto;
  width: 70%;
}
#caption{
  text-align: center;
  margin: 15px auto;
  width: 70%;
  max-height: 750px;
  font-size: 20px;
  color:#ccc;
}
#moimg,#caption{
  -webkit-animation: first 1s;
  -o-animation: first 1s;
  animation: first 1s;
}

.close{
    display:inline-block;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 14%;
    color:#f1f1f1;
    cursor:pointer;
}
.close:hover;
.close:focus{
    color:#bbb;
    cursor:pointer;
}

js

   var motai=document.getElementById("mo");
    var moimg=document.getElementById("moimg");
    var realimg=document.getElementById("real");
    var caption=document.getElementById("caption");
    var enlarge=document.getElementById("enlarge");
     enlarge.οnclick=function(){
      motai.style.display="block";
      moimg.src=realimg.src;
      caption.innerHTML=realimg.alt;
        motai.οnclick=function(){
            motai.style.display="none";
        }
     }
     var span=document.getElementById("close");
     span.οnclick=function(){
      motai.style.display="none";
     }