HTML5/CSS3实现添加锁屏效果_html/css_WEB-ITnose

锁屏效果，也就是将屏幕置于模态，不允许用户触发任何动作，只能解除锁定后才能继续使用，jQueryUI的dialog有模态对话框，这一点不难做到。那么，首先需要在页面中添加一个div层，用于做模态的层：

Html代码

其对应的CSS比较简单，主要设置一下z-index属性，值设置的很大即可，就能达到覆盖其余元素的效果，加上opacity淡化一下背景：

Css代码

#overlay{ height:100%; min-width:1280px; width:100%; position:absolute; left:0px; top:0px; opacity:0.7; z-index:100; }

这样就有了一个覆盖页面之上的层，显示效果为：

下面是添加解除锁定的部分，我们模仿iphone解锁效果，那么需要添加一下：

Html代码

滑动解除锁定

查看更多关于HTML5/CSS3实现添加锁屏效果_html/css_WEB-ITnose的详细内容...