Custom password window for the same page

Question

Custom password window for the same page

Navigation

#1 by (2 votes)

3

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

Very simple even people are children's page ...

code that 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 ...

Same as above but wanted to leave custom, can be with jquery, I already searched for websites about dialog boxes but I could not ...

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

javascript html css

asked by anonymous 18.08.2018 / 15:29

1 answer

Regular expression that accepts letters, numbers, and underline How do I stop the video when I close Modal?

score 2 · Accepted Answer

You can put this div as an overlay, it works the same and you can customize it 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 script just above </body>


If you want the redirection to replace the current location so that you can not go back to the page just by clicking back use: window.location.replace instead of window.location.href


I put document.getElementById("concluir").onclick = so that when inspecting botton does not easily deliver what script is executing function, but if it does not work delete and add onclick="senha()" to button like this:
<button id="concluir" onclick="senha()">CONCLUIR</button>