Bloquear contenido con ventana y opacity que pida contrasegna

destinopolinesia · #1 (**permalink**) 28/05/2012, 22:33

Hola no se si estoy en el foro correcto o debiera postear esto en javascript. Quiero bloquear el contenido de una pagina de mi sitio a todos los visitantes con una dando una opacidad al contenido y una ventana emergente de unos 600 x 400px que solicite una contraseña. al introducir la contraseña correctamente el efecto sera la desaparición de dicha ventana y el retorno al contenido sin opacidad. Me gustaría que en la ventana fuera posible incluir algo de texto linkado informando sobre donde obtener la contraseña. Gracias de antemano todos y a ti admin si me he confundido de sección no dudes en comunicarme o trasladarme.

Jg23 · #2 (**permalink**) 29/05/2012, 01:15

Dame 5 minutos, te codeo lo que necesitas ;)

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>