HTML and CSS lock screen for mobile web application
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!
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();
});
});
Well it's been dredged up now, so I might aswell add this. Use <input type="text" pattern="[0-9]*" />
on a text field to get a numeric input. Not quite the same, but easier than using a full keyboard, and easier than coding the whole keypad yourself.