參考程式

<!doctype html>
<html lang="zh_tw">
<head>
<meta charset="utf-8">

<script>

</script>
<title></title>
</head>
<script>
	function showdiv(){
		var lobg = document.getElementById("lobg");
		lobg.style.display="block";
		var show = document.getElementById("login");
		show.style.display="block";
		show.style.animation="demo1 1s 1 forwards ";
	}
	function closediv(){
		var close = document.getElementById("login");
		close.style.display="none";
		var lobg = document.getElementById("lobg");
		lobg.style.display="none";
	}
</script>
<style>
	#lobg{
		background-color:rgba(0,0,0,0.6);
		display:none;
		position:fixed;
		top:0;
		left:0;
		height:100%;
		width:100%;
	}
	#login{
		border:1px solid black;
		width:30%;
		display:none;
		background-color:white;
		position:relative;
		top:20%;
		left:35%;
		overflow:hidden;
		white-space: nowrap;
		padding:10px;
		text-align:center;
	}
	@keyframes demo1{
		from{ height:0px; }
		to  { height:500px; }
	}
</style>

<body>
	<div><button onclick="showdiv()">登入</button></div>
	<div id="lobg">
		<div id="login">
			<div style="text-align:right;">
				<button onclick="closediv()">X</button>
			</div>
			<h3>登入<h3>
			帳號： <input type="text" name="user" /><br/>
			密碼： <input type="password" name="pwd" />
		</div>
	</div>
</body>
</html>
登入

帳號： 密碼：

參考程式

帳號：
密碼：
