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

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

已邀请:

chenchenecho

赞同来自:

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

mercury74

赞同来自:

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

要回复问题请先登录注册