css - 用于移动网络应用程序的 HTML 和 CSS 锁屏

Question

我正在使用 jquery 移动、主干、下划线和待定模板引擎构建单页离线 html5 网络应用程序。

我想创建一个看起来类似于 native iPhone 锁屏的锁屏。在我重新发明轮子之前，有人见过这样的东西吗？我找不到这方面的例子。

谢谢!

Answer 1

编辑:哦不，这是一个老问题!

在您的页面中添加一个固定位置的隐藏 div。当您需要激活锁定屏幕时，使用 jQuery 以编程方式显示它:

CSS

div#lockscreen {
    width: 0;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

jQuery

$(document).ready(function() {
    //hypothetical activation control
    $("#lock").click(function() {
        $("#lockscreen").css("width", "100%");
        $("#lockscreen").css("height", "100%");
        $("#lockscreen").css("z-index", "1000");
        //or dynamically generate z-index value
        $("#lockscreen").fadeIn();
    });
});