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

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

---

ty_影559 优艾设计网_设计圈 12小时前

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

---

策马西风么雅•PA等 优艾设计网_设计百科 12小时前

https://github.com/cssobj/cssobj

---

潘孟乐 优艾设计网_Photoshop问答 12小时前

.popup{

---

小姑娘T 12小时前

优艾设计网_Photoshop问答

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

---

360U3310989416 12小时前

优艾设计网_Photoshop论坛

首先讲一下~~~如果是全屏覆盖，我想了一下整个过程~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出来~

---

may06 优艾设计网_电脑技术 12小时前

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

---