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

Question

我正在使用 jquery mobile、主干、下划线和待定模板引擎构建一个单页、离线 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();
    });
});

Answer 2

嗯，现在已经挖出来了，所以我不妨补充一下。在文本字段上使用<input type="text" pattern="[0-9]*" />以获取数字输入。不完全相同，但比使用完整的键盘更容易，并且比自己编写整个键盘更容易。