que - responsive design css ejemplos

Pantalla de bloqueo de HTML y CSS para la aplicación web móvil

Question

Estoy construyendo una sola página, aplicación web html5 sin conexión usando jquery mobile, backbone, underscore y el motor de plantillas tbd.

Me gustaría crear una pantalla de bloqueo que se parece a la pantalla de bloqueo del iPhone nativo. Antes de ir a reinventar la rueda, ¿alguien ha visto algo así antes? No he podido encontrar un ejemplo de esto.

¡Gracias!

Answer 1

Bueno, ha sido dragado ahora, así que también puedo agregar esto. Utilice <input type="text" pattern="[0-9]*" /> en un campo de texto para obtener una entrada numérica. No es exactamente lo mismo, pero es más fácil que usar un teclado completo, y más fácil que codificar todo el teclado usted mismo.

Answer 2

Editar: ¡Oh, no, es una vieja pregunta!

Agregue un div oculto de posición fija a su página. Cuando necesite activar la pantalla de bloqueo, use jQuery para mostrarla programáticamente:

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