Custom password window for the same page

Question

I wanted to put a password on the page when it is accessed(simple), in a window (Alert type) with password that appears before loading the page, I wanted this custom "Alert" like a modal or any custom window...

very simple even people is childish page...

code I’m using:

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

Important that you can not see the background before entering the correct password...

As above but wanted to leave customized, can be with jquery, I’ve looked on sites about dialog boxes but could not...

I am not worried about safety, it is for small children (students), for they do not advance without permission. but I put in unescape and use noscript =D

Answer 1

You can put that div as overlay, it works the same way and you can customize with css and add new elements HTML to your liking.

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>

• Put the script just above </body>
  
• If you want the redirect to replace the current location then it is not possible to return to the page just by clicking back use: window.location.replace in place of window.location.href
  
• Placed document.getElementById("concluir").onclick = so that when inspecting the botton not easily delivered which script is running the function, but if it doesn’t work delete and add onclick="senha()" in the button thus:
  <button id="concluir" onclick="senha()">CONCLUIR</button>