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

发布于 2024-11-29 17:57:22 字数 166 浏览 0 评论 0原文

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

我想创建一个看起来与原生 iPhone 锁屏类似的锁屏。在我重新发明轮子之前，有人见过这样的事情吗？我还没有找到这方面的例子。

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙与沫 2024-12-06 17:57:22

编辑：哦不，这是一个老问题了！

将固定位置的隐藏 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();
    });
});

Edit: Oh no, it's an old question!

Add a fixed-position, hidden div to your page. When you need to activate the lock screen, use jQuery to programmatically show it:

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();
    });
});

回复收藏 0 原文