อยากทราบว่าเราสามารถเขียน javascript คลิกปุ่มแล้วให้มี popup เด้งขึ้นมาเพื่อให้กรอกข้อความ แบบฟอร์มไหมครับ

<style type="text/css">
		#popupbox{
			margin: 0; 
			margin-left: 52.5%; 
			margin-top: 5px; 
			padding-top: 10px; 
			width: 30%; 
			height: 150px; 
			position: absolute; 
			background: #3A87AD; 
			border: solid #FCF8E3 1px; 
			z-index: 9; 
			font-family: arial; 
			visibility: hidden; 
			}
			#popupregister{
			margin: 0; 
			margin-left: 52.5%; 
			margin-top:1%; 
			padding: 5px 50px 5px 5px; 
			width: auto; 
			height: auto;
			position: absolute; 
			background: #3A87AD; 
			border: solid #FCF8E3 1px; 
			z-index: 9; 
			font-family: arial; 
			visibility: hidden; 
			}
	</style>
	
	<script language="JavaScript" type="text/javascript">
		function register(showhide){
		if(showhide == "show"){
		    document.getElementById('popupregister').style.visibility="visible";
		}else if(showhide == "hide"){
		    document.getElementById('popupregister').style.visibility="hidden"; 
		}
	}
</script>
	

<button><a href="javascript:register('show');">Regist</a></button>


<div id="popupregister" style="position: absolute;margin-left: 30%;margin-top: 5%;"> 
	<h5 style="text-align: center;display: block;width: 100%;color: #FFFFFF;">register form</h5>
	<form name="register" action="#" method="post" onsubmit="JavaScript:return fncsubmit();">
		
	 <table>
	 	<tr>
	 		<td style="text-align: right;color: #FFFFFF;padding-right: 5px;">firstname</td>
	 		<td><input type="text"name="firstname" /></td>
	 	</tr>
	 	<tr>
	 		<td style="text-align: right;color: #FFFFFF;padding-right: 5px;">lastname</td>
	 		<td><input type="text"name="lastname" /></td>
	 	</tr>
	 	<tr>
	 		<td style="text-align: right;color: #FFFFFF;padding-right: 5px;">email</td>
	 		<td><input type="text"name="email" /></td>
	 	</tr>
	 	<tr>
	 		<td style="text-align: right;color: #FFFFFF;padding-right: 5px;">pasword</td>
	 		<td><input type="password" name="password"/></td>
	 	</tr>
	 	<tr>
	 		<td style="text-align: right;color: #FFFFFF;padding-right: 5px;">cpassword</td>
	 		<td><input type="password"name="cpassword" /></td>
	 	</tr>
	 </table>
	<center><input style="margin-left: 50px;" type="submit" name="submit" value="Regis" /><button><a href="javascript:login('hide');">x close</a></center>
	
	</form>
	<br />
</div>