<!DocType html> | |
<html language="en-us"> | |
<head> | |
<meta charset="utf-8"/> | |
<title>HTML5 Semantic Tags</title> | |
<script> | |
function f1() | |
{ | |
var obj=document.getElementById("d1"); | |
obj.showModal(); | |
} | |
function f2() | |
{ | |
var obj=document.getElementById("d1"); | |
obj.close(); | |
} | |
function f3() | |
{ | |
var obj=document.getElementById("d1"); | |
obj.open(); | |
} | |
</script> | |
</head> | |
<style> | |
#d1::backdrop | |
{ | |
background-color:pink; | |
opacity:0.5; | |
} | |
#d1 | |
{ | |
width:"350px"; | |
border-top:20px solid orange; | |
border-bottom:20px solid orange; | |
border-radius:25px; | |
text-align:center; | |
margin-top:250px; | |
} | |
</style> | |
<body > | |
<h1>Usage of HTML5 Dialog Tag</h1> | |
<hr> | |
<input type="button" value="Show Dialog" onclick="f1()"/> | |
<br><br> | |
<dialog id="d1"> | |
<h2>Web UI Course List</h2> | |
<ol style="text-align:left"> | |
<li>HTML5</li> | |
<li>CSS3</li> | |
<li>ANGULAR JS</li> | |
<li>JQUERY</li> | |
<li>BOOTSTRAP</li> | |
</ol> | |
<input type="button" value="Exit" onclick="f2()"/> | |
<a href="images (4).jpg"><input type="button" value="Save" onclick="f3()"/></a> | |
</dialog> | |
</body > | |
</html> |
Monday, 21 August 2017
Usage of HTML5 Dialog Tag
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment