HTML and CSS lock screen for mobile web application

Question

I'm building a single page, offline html5 web application using jquery mobile, backbone, underscore and tbd templating engine.

I'd like to create a lockscreen that looks similar to the native iPhone lockscreen. Before I go reinvent the wheel has anyone seen anything like this before? I haven't been able to find an example of this.

Thanks!

Answer 1

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