用于移动Web应用程序的HTML和CSS锁定屏幕

Question

我正在使用jquery mobile,backbone,underscore和tbd模板引擎构建单页,离线html5 Web应用程序.

我想创建一个类似于原生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();
    });
});