bloquear contenido con opacity y ventana hasta introd password

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

Hola no se si estoy en el foro correcto o debiera postear esto en php. Quiero bloquear el contenido de una pagina de mi sitio a todos los visitantes dando una opacidad al contenido y haciendo saltar 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.

emprear · #2 (**permalink**) 28/05/2012, 23:20

nada más que eso?, por lo menos decinos que hiciste hasta ahora

destinopolinesia · #3 (**permalink**) 28/05/2012, 23:33

creo que me he dirigido a ustedes con claridad, corrección y sinceridad e intentando aportar una situación y su posible solución a otros programadores web que puedan encontrarla utilidad también. Los comentarios in un objetivo claro de resolvernos a todos esta duda creo que están de sobra.

emprear · #4 (**permalink**) 29/05/2012, 01:31

Si al menos expusieses un código, aunque más no sea un intento, de lo que estás tratando de hacer, seguramente otras serían las respuestas.

Si te tomás el trabajo de releer lo que escribiste un par de veces, te darías cuenta de que no estas pidiendo ayuda u orientación para resolver un problema puntual, estás haciendo la descripción detallada de toda una aplicación que involucra al menos,html, css, javascript, php.

En FDW hau un muy buen subforo dónde se hace ofertas de trabajo, buscalo, porque es ahi el lugar más indicado dónde tendrías que exponer tu pregunta (si se la puede llamar así)

Jg23 · #5 (**permalink**) 29/05/2012, 02:15

-_- ya lo había respondido en la otra sessión ¬¬ Bueno aqui el codigo me salió en menos de 5 minutos jejeje

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>

emprear · #6 (**permalink**) 29/05/2012, 12:43

@Jg23

Validar una contraseña con esto

function getPassword() {
var Password = 'TU PASSWORD';
return Password;
}

Es por demas inseguro, por no decir completamente inutil.
Saludos

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

Cita:

Iniciado por emprear

@Jg23

Validar una contraseña con esto

function getPassword() {
var Password = 'TU PASSWORD';
return Password;
}

Es por demas inseguro, por no decir completamente inutil.
Saludos

También quieres que te haga esa función? -_- , te hago el script completo y tu no haces nada xD, bueno en la función puedes poner .... un post a un archivo php que tendrá la password. ejemplo:

Código Javascript:

Ver originalfunction getPassword() {
  $.post("test.php", { reponse: 1 },
   function(data) {
     return data;
   });
}

y en el archivo test.php que sería donde esté la contraseña

Código PHP:

Ver original<?php
 
$password = 'Contraseña';
 
if(isset($_POST["reponse"]))
{
    if(!empty($_POST["reponse"]))
    {
        echo $password;
    }
}
 
?>

De esta forma nadie podría ver la contraseña ;)

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>

emprear · #9 (**permalink**) 29/05/2012, 16:50

Cita:

Iniciado por Jg23

También quieres que te haga esa función? -_- , te hago el script completo y tu no haces nada xD, bueno en la función puedes poner .... un post a un archivo php que tendrá la password. ejemplo:

Código Javascript:

Ver originalfunction getPassword() {
  $.post("test.php", { reponse: 1 },
   function(data) {
     return data;
   });
}

y en el archivo test.php que sería donde esté la contraseña

Código PHP:

Ver original<?php
 
$password = 'Contraseña';
 
if(isset($_POST["reponse"]))
{
    if(!empty($_POST["reponse"]))
    {
        echo $password;
    }
}
 
?>

De esta forma nadie podría ver la contraseña ;)

NO @Jg23, yo no quiero nada, el que lo quiere es @destinopolinesia, quien se podría haber ahorrado las explicaciones y decir sencillamente,
quiero que alguien me haga esto :
bla bla bla .....

Yo muchas veces, contestando un post, termino desarrollando todo el código, pero siempre parto de alguna intención o propuesta por parte del usuario, que como se ve, no es este el caso