手机端的全屏弹窗如何写CSS

Question

手机滚动到 页面的中间，有一个按钮，点击这个按钮可以弹出一个全屏弹出层，层中间有个图片。点击任何区域 ，弹出层消失。这一过程的CSS怎么写?

Answer 1

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

Answer 2

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

<div class="popupBg"></div>

<div class="popup">

<img />

</div>

.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;

}

Answer 3

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

Answer 4

那应该是个div的遮罩

Answer 5

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

https://github.com/cssobj/cssobj