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();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With