Foros del Web - Ver Mensaje Individual - bloquear contenido con opacity y ventana hasta introd password

Jg23 · #8 (**permalink**) 29/05/2012, 16:29

emmm aqui el Html bn y completo xd

Cita:

Código HTML:

Ver original<!DOCTYPE html>
<html lang='es'>
  <head>
    <title>Bloquear contenido - by Jg</title>
    <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
    <style>
        body { margin: 0; padding: 0; background: white; font-family: 'Arial', Verdana; font-size: 14px }
        #capa { opacity: .8; margin: 0; width: 100%; height: 100%; position: fixed; background: #000 }
        #alert { padding: 10px; width: 600px; height: 400px; background: white; margin: auto auto; margin-top: 7%; border: 2px solid #000 }
        #alert input { margin: 5px; padding: 5px }
    </style>
    
    <script>
      $(document).on("ready", function() {
        
        $("#password").focus();
      
        $("#submit").click( function() {
            var input = $("#password").val();
            
            if(input == "") {
                alert("Inserta una contraseña");
                $("#password").focus();
            } else {
                checkPassword(input);
            }
        
        });
      });
      
      function checkPassword(INPUT) {
  $.post("test.php", { reponse: 1 },  function(data) {
     if(data != INPUT)
        {
            alert("Contraseña incorrecta");
            $("#password").focus();
        }
    else
        {
            $('#capa').fadeOut(500);
        }
   });
}
    </script>
  </head>
  <body>
    <div id='capa'>
      <div id='alert'>Contenido de la ventana<hr />Deves insertar la contraseña para continuar. <br /><br /><input id='password' type='password' placeholder='Inserta la contraseña' /><br /><input type='submit' id='submit' value='Continuar' /></div>
    </div>
    <h1 style ='margin:0px; padding: 10px'>Contenido web</h1>
    ¡Buenas Foros del Web!
  </body>
</html>