Monday, 21 August 2017

Usage of HTML5 Dialog Tag

<!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>

No comments:

Post a Comment