html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。...

需求提要

我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击、focus等。

为了更好突出弹出框的效果,除了弹出框以外的部分,我们可以加上一个幕布(英文为backdrop)效果,让背景的元素模糊、半透明、变暗等等,让用户的注意力能够完全集中在弹出框之中。

弹出前:

1460000024552585

弹出后:

1460000024552584

需求分析把弹出框设定到当前页面的最顶端很简单,我们很快就能想到用Z-index去实现,把Z-index设定到一个足够大的值(取决于你的项目中Z-index数值的基本设计),确保它最大即可。

要让别的元素无法点击,这个我们在弹出框元素上做文章,好像无法非常简便地实现。要实现这个特征,我们需要和需求提要2一起思考。

既然我们不仅要让别的元素无法点击,还要让弹出框的背景有幕布效果,那我们可以除了弹出框以外,再加一个元素,让这个元素的长、宽和视窗大小一致(即盖住整个屏幕)并且确保它的Z-index也足够大,但是又刚好比弹出框的Z-index小一点。这样我们就得到了两个元素——一个是我们的弹出框,另一个是我们的幕布区域(整个屏幕除了弹出框的区域),这样在做样

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值