3

Queria colocar uma senha na página quando ser acessada(simples), em uma janela(tipo alert) com senha que aparece antes de carregar a página, eu queria esse "alert" personalizado igual um modal ou qualquer janelinha personalizada...

bem simples mesmo gente é pagina infantil...

código que estou usando:

<script language=javascript>
senha = '123456';
senhadig = prompt("Digite a senha","")
if (senha != senhadig){
top.location.href='erro.html';
}
</script>

Importante que não dê para ver o fundo antes de digitar a senha correta...

Igual acima porém queria deixar personalizada, pode ser com jquery, ja procurei em sites sobre caixas dialog mas não consegui...

Eu nao estou preocupada com segurança, é para crianças pequenas(alunos), para elas não avançarem sem permissão. mas eu coloco em unescape e uso noscript =D

2
  • 1
    Se você já sabe que poderia ser um modal, por quê não tenta fazer usando um modal?
    – Woss
    Commented 18/08/2018 às 13:57
  • pq não consigo colocar um codigo de senha no modal, só uma janela
    – Lary
    Commented 18/08/2018 às 13:59

1 Resposta 1

2

Você pode colocar essa div como overlay, funciona do mesmo jeito e você pode personalizar com css e adicionar novos elementos HTML ao seu gosto.

document.getElementById("concluir").onclick = function senha() {
  var senha = '123456';
  var senhadig = document.getElementById("senha").value;

  if (senha == senhadig){
    document.getElementById("over").style.display="none"
  }else if (senha != senhadig){
    window.location.href='erro.html';
  }
}
#over {
  position:fixed;
  top:0;
  left:0;
  background:#232323;
  width:100%;
  height:100%;
  z-index:999999;
}
.inp {
  width:600px;
  margin:30px auto;
}
.con {
  width:560px;
  margin:30px auto;
}
#senha {
    width: 100%;
    border: none;
    background: #E9EAEC;
    color: rgba(0,0,0,0.8);
    font-size: 2em;
		transition: all .5s linear;
}
#senha:hover, #senha:focus, #concluir:focus{
	outline: 0;
	transition: all .5s linear;
	box-shadow: inset 0px 0px 10px #777;
}
#concluir {
  width:100%;
  background:#E9EAEC;
  color:#7e9ebc;
  border: 2px solid #ddd;
  font-size:20px;
  font-weight:bold;
  padding:5px;
  cursor:pointer;
}
.label {
  display:block;
  padding:15px 15px 15px 0;
  color: #7e9ebc;
  font-size: 20px;
}
<div id="over">
<div class="inp">
<label class="label" for="password">Digite a senha</label>
<input type="password" id="senha"/><br>
<button id="concluir">CONCLUIR</button>
</div>
</div>
<p>Pagina</p>

  • Coloque o script logo acima de </body>
  • Caso queira que o redirecionamento substitua a localização atual assim não sendo possível voltar para a pagina apenas clicando em voltar use: window.location.replace no lugar do window.location.href
  • Coloquei document.getElementById("concluir").onclick = para que ao inspecionar o botton não entregue facilmente qual script está executando a função, porém se não funcionar apague e adicione onclick="senha()" no button assim:
    <button id="concluir" onclick="senha()">CONCLUIR</button>
7
  • aqui ta funcionando certinho do jeito que queria mas quando fui tentar fica estatico como se a função nao funcionasse, não sei oque ta errado to colocando o script, css e o html normal, tentei ate em um arquivo html mas tbm nao foi
    – Lary
    Commented 18/08/2018 às 15:27
  • coloque o script logo acima de </body>
    – Mark Vaaz
    Commented 18/08/2018 às 15:30
  • ta do mesmo jeito, só mostra essa janela parada vc clica e nd
    – Lary
    Commented 18/08/2018 às 15:36
  • atualizei a resposta
    – Mark Vaaz
    Commented 18/08/2018 às 15:42
  • 1
    consegui obrigada por esta e pela resposta de ontem tbm
    – Lary
    Commented 18/08/2018 às 15:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .