For en måneds tid siden lavede jeg dette eksempel til en af mine elever, der manglede en loginbox efter samme princip. Koden er rimelig barberet, så du kan se og lære, hvad der skal til:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Loginbox eksempel</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
display: none;
z-index: 1000;
}
#loginBox {
position: fixed;
width: 250px;
height: 157px;
background: #f0f0f0;
border: 1px solid;
border-color: #ccc #444 #444 #ccc;
display: none;
z-index: 1001;
}
#loginBox * {
font: 11px tahoma, sans-serif;
}
#loginBox .caption {
position: relative;
padding: 2px;
font-weight: bold;
font-size: 14px;
text-align: center;
background: #666;
border-bottom: 1px solid #000;
color: #fff;
}
#loginBox .close {
position: absolute;
font-weight: bold;
font-size: 12px;
top: 0;
right: 2px;
padding: 3px 4px;
cursor: pointer;
}
#loginBox input {
width: 140px;
margin-bottom: 5px;
}
#loginBox .controls {
width: 145px;
margin: 12px auto 6px auto;
}
#loginBox .btnRow {
text-align: center;
border-top: 1px solid #ccc;
margin: 0 10px;
padding-top: 10px;
}
#loginBox button {
width: 65px;
}
</style>
<script type="text/javascript">
function showLogin() {
var elmBox = document.getElementById("loginBox"),
elmCover = document.getElementById("cover"),
css = elmCover.style, elmBody = document.getElementsByTagName("body")[0],
elmDoc = document.getElementsByTagName("html")[0];
css.height = elmDoc.clientHeight + "px";
css.display = "block";
css = elmBox.style;
css.display = "block";
css.left = ((elmDoc.clientWidth-elmBox.offsetWidth)/2) + "px";
css.top = ((elmDoc.clientHeight-elmBox.offsetHeight)/2) + "px";
elmBox.getElementsByTagName("input")[0].focus();
}
function hideLogin(bCloseCover) {
var elmBox = document.getElementById("loginBox"),
elmCover = document.getElementById("cover");
elmBox.style.display = "none";
if (bCloseCover) {
elmCover.style.display = "none";
elmBox.getElementsByTagName("form")[0].reset();
}
}
function doResize() {
var elmBox = document.getElementById("loginBox"),
elmCover = document.getElementById("cover"),
elmDoc = document.getElementsByTagName("html")[0],
css = elmBox.style;
if (elmCover.style.display=="block") {
elmCover.style.height = elmDoc.clientHeight + "px";
css.left = ((elmDoc.clientWidth-elmBox.offsetWidth)/2) + "px";
css.top = ((elmDoc.clientHeight-elmBox.offsetHeight)/2) + "px";
}
}
if (window.addEventListener) window.addEventListener("resize", doResize, false);
else if (window.attachEvent) window.attachEvent("onresize", doResize);
</script>
</head>
<body>
<p>
<button onclick="showLogin()">Login</button>
</p>
<div id="loginBox">
<div class="caption" onclick="hideLogin(true)">Login<div class="close" title="Luk">X</div></div>
<form action="" method="post" onsubmit="hideLogin()">
<input name="context" value="login" type="hidden">
<div class="controls">
<div>
<div>Brugernavn:</div>
<input name="user" type="text"></div>
<div>
<div>Kodeord:</div>
<input name="pass" type="password"></div>
</div>
<div class="btnRow">
<button type="reset" onclick="hideLogin(true)">Fortryd</button>
<button type="submit">Login</button>
</div>
</form>
</div>
<div id="cover"> </div>
</body>
</html>
Bemærk, at hovedparten af CSS-koden er knyttet til loginbox'en - ikke til det at fade siden. JavaScriptet kunne godt 'sexes' lidt op, men af pædagogiske grunde har jeg ikke komprimeret den for meget =)
Ny bruger
Nybegynder
Opret
Preview
