【分享】图片预览增加标题 及 父子web下全屏

1. 图片全屏预览加了个标题 ，父子页面全屏用的是通知父页面显示遮罩的方法（有更好的办法可以留言），有需要的可以看一下，在原先的基础上做了些改动，css和js放在了附件里，改动的地方可以在js里搜索关键字zrh
   标题效果：
   
2. 简单讲一下改动的地方吧，有漏掉的地方请谅解，

• 使用方法是在img标签里增加data-content="照片标题",

• css里增加了个样式

  .mui-preview-footer .mui-preview-footerContent {  
  display: block;  
  line-height: 25px;  
  color: #fff;  
  text-align: center;  
  margin: 15px auto 4;  
  
  background-color: rgba(0, 0, 0, 0.4);  
  
  font-size: 16px;  
  }

• .mui-preview-footer里的height改到20px;其它还有没有自己对比哈。

• js里代码第3行里有个mui-preview-footer mui-hidden的class，去掉了mui-hidden

• 13行加了个标签<span class="mui-preview-footerContent"></span>

• 其余的改动自己搜索zrh看吧

• 325行和353行那几行代码是显示和关闭遮罩的。父页面的代码是

  
  var flag = false;  
  var mask = mui.createMask(callback);  
  function callback(){  
  return flag;  
  }  
  window.addEventListener('showMask',function(event){  
  mask.show();//显示遮罩  

});
window.addEventListener('closeMask',function(event){
flag = true ;
mask.close();
flag = false ;
});

就这么多吧，有问题留言。