Foros del Web - Ver Mensaje Individual - Bloquear contenido con ventana y opacity que pida contrasegna

Jg23 · #3 (**permalink**) 29/05/2012, 01:25

aquí lo prometido ;)

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 Password = getPassword();
            var input = $("#password").val();
            
            if(input == "") {
                alert("Inserta una contraseña");
                $("#password").focus();
            } else if(input != Password) {
                alert("Contraseña incorrecta");
                $("#password").focus();
            }
            else  {
                $("#capa").fadeOut(500);
            }
        
        });
      });
      
      function getPassword() {
        var Password = 'TU PASSWORD';
        return Password;
      }
    </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>