ReportNg测试报告的定制修改（三）

感谢@新鲜热辣的建议以及帮助，之前在ReportNg测试报告的定制修改（二） 中提到的点击图片在新的tab页面打开的方式确实不方便，所以我们在reportng中的html中加入js的一些代码来解决这个问题

我们找到suites.html.vm 在body中加入如下的代码

<style>
  .preview { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; }
  .bg { width: 100%; height: 100%; background: #000; opacity: 0.5; }
  .preview img { width: 960px; height: 540px; position: absolute; top: 20%; left: 20%; }
</style>
<div class="preview">
  <div class="bg"></div>
  <img src="" />
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $('.screenshotimage img').on({
    click : function(){
      var src = $(this).attr('src');
      $('.preview img').attr('src', src);
       $('.preview').show();
    }
  });
  $('.preview .bg').on({
    click : function(){
      $('.preview').hide();
    }
  })
</script>

以上的jquery实际上很好理解，就是在点击图片的时候，获取到图片的src ,再将这个值赋值给 preview中的img 。 当然我们在css中已经声明好了图片的大小了。这样子就可以实现点击图片放大的效果了。而不用在新的标签页打开该图片。