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