弹层的显示与隐藏

1、html

    <div class="content" style="margin-top: -30px;">
        <div class="title">
              <span class="border">span>
              <span class="border">span>
              <span class="text">户型图span>
              <span class="border">span>
              <span class="border">span>
          div>
          <div class="row mt50">
                <div class="col-lg-6 col-xs-6 img-responsive" >
                    <img src="images/pic6.jpg" alt="">
                div>
                <div class="col-lg-6 col-xs-6 img-responsive" >
                    <img src="images/pic7.jpg" alt="">
                div>
                <div class="col-lg-6 col-xs-6 img-responsive" >
                    <img src="images/pic8.jpg" alt="">
                div>
                <div class="col-lg-6 col-xs-6 img-responsive" >
                    <img src="images/pic9.jpg" alt="">
                div>
            div>
           <div class="arrow">
               <img src="" alt="" style="width: 700px;margin: 25px auto;">
           div>
     div>

2、css

.content{
  color: #ffffff;
  padding: 50px;
  position: relative;
}
  .arrow{
  width:1000px;
  height: 1000px;
  background-color:rgba(0,0,0,.7);
  position: absolute;
  top:180px;
  left: -30px;
  display: none;
}
.img-responsive{
  padding: 5px;
}
.mt50{
  margin-top: 50px;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}

3、js

 <script src="js/jquery.min.js">script>
    <script>
        $('.img-responsive img').on('click',function(){
            var ts = $(this);
            console.log(ts.attr('src')) ;
            //获取当前被点击的图片的链接地址
            var imgLink = ts.attr('src') ;
            //改变弹层中图片的链接地址为被点击的图片的链接地址
            $('.arrow img').attr('src' , imgLink ) ;
            //显示弹层
            $('.arrow').show();
        });
        /*点击弹出层隐藏*/
        $('.arrow').on('click',function(){
            var ts = $(this);
            ts.hide();
        });
    script>