感谢@新鲜热辣的建议以及帮助,之前在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中已经声明好了图片的大小了。这样子就可以实现点击图片放大的效果了。而不用在新的标签页打开该图片。