HTML5 Dialog Tag

<!DOCTYPE html>
<html>
	<head>
    	<title>Dialog Tag</title>
    </head>
    <body>
    	
		<style type="text/css">
		    .dialog_box{width:70%;background-color:#0099da; color:#FFF;border:1px dotted black;}
		</style>
		
		
        <div>
			<dialog id="dialog_1" class="dialog_box">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
				<button id="hide">Close</button>
			</dialog>
			
			<button id="show">Click Here!</button>
	    </div>
		
		
		
		<script type="text/JavaScript">
		(function() {  
			var dialog = document.getElementById('dialog_1');  
			document.getElementById('show').onclick = function() {  
				dialog.show();  
			};  
			document.getElementById('hide').onclick = function() {  
				dialog.close();  
			};  
		})(); 
		</script>
		
        
    </body>
</html>

Output :

Topic :Dialog Tag