Вот что у меня получилось, оно не так работает как надо
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<CENTER>
<body bgColor=#923947 link="#008000" onload="start(document.forms[0])" onunload="cleartids()">
<FONT color="#20ffff"><h3><CENTER></CENTER></h3></FONT color>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function LogIn(){
loggedin=false;
username="";
password="";
addnewusername="";
username=prompt("Name: Primer","");
username=username.toLowerCase();
password=prompt("Password - Primer","");
password=password.toLowerCase();
if (username=="Primer" && password=="Primer") {
loggedin=true;
window.location="http://localhost/engine/messages/inbox";
}
if (username=="Primer2" && password=="Primer2") {
loggedin=true;
window.location="ndex.html";
}
// и так далее...
if (loggedin==false) {
alert("Неверный пароль или имя пользователя!");
}
}
// End -->
</SCRIPT>
</HEAD>
<script>
jQuery.fn.center = function()
{
var w = $(window);
this.css("position","absolute");
this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
return this;
}
function creatOverlay(){
var docHeight = $(document).height();
$("<div id='overlay'></div>")
.appendTo("body")
.height(docHeight)
.css({
'opacity': 0.4,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
$(this).clone().appendTo("body").center().css({'z-index': 5001}).attr({'id' : 'cln'})
}
function remov()
{
$("#overlay, #cln").remove();
}
$(document).on({"click": creatOverlay}, "input")
$(document).on({"click": remov}, "#overlay, #cln")
</script>
</head>
<body>
<BODY>
<center>
<form><input type=button value="Block This Page" onClick="LogIn()"></form>
</center>
</BODY>
</body>
</html>