弄个p 宽高百分百，全屏覆盖，加绝对定位position:absolute;
left:0px ;top:0px;backgrouond:url("xxx") no-repeat center;按你的要求来说没必要用个单独的标签放图片，直接做背景图片来的干净。z-index层级定高点能看到就行。这个盒子开始默认隐藏 display：none;点击之后显示，然后点本身又隐藏。如果用jQ的话，你可以用toggle控制。

需要两个p，一个背景，一个弹窗内容，都是display:none，点击按钮的时候变成display:block,点击popupBg的时候变成display:none

<p class="popupBg"></p>

<p class="popup">

<img />

</p>

.popupBg{

display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.8);
z-index: 100;

}

.popup{

display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
z-index: 100;
background: #FFF;

}

首先讲一下~~~如果是全屏覆盖，我想了一下整个过程~
1.html结构里加上一个p，p里可以嵌套img，因为你要中间有一个图片；
2.给这个p加上一个类，类名随意，是为了后面的css代码做准备；
3.css可以用position:absolute;top,left,right,bottom都设置为0，这样子就实现全屏，而且并不会对其他元素造成影响；
4.使用jquery的点击事件，函数里面调用toggleClass((第二的类名)，这个可以实现点击出现，再点击这个p的时候消失；然后按钮就很简单一个click事件，给这个p添加这个类；
5.img的处理，可以用width等等对他进行大小的限制。
以上是假如是我在完成，我会做的一个做法，做法不限，但是这可能是我第一反应会实现的方案吧~如果有不正之处请指正~思路是这样子的~等待会看看可不可以写一个简单的demo出来~

那应该是个p的遮罩

可以试试这个类库,实现手机端自适应，动态计算CSS：

https://github.com/cssobj/cssobj