asp.net.ph Source Code Viewer

<html>
<head>
<title>Abakada HTML Demo: Modal Image Example</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
dialog {
   border-radius: 25px 0;
   padding: 0;
   filter: contrast( 0 );
   transform: scaleY( 0 );
   transition: all 0.7s ease-in-out;
}
dialog:open {
   filter: contrast( 1.25 );
   transform: scaleY( 1 );
}
@starting-style {
   dialog:open {
      filter: contrast( 0 );
      transform: scaleY( 0 );
   }
}
dialog::backdrop {
   backdrop-filter: blur(0);
   background-color: rgb(0 0 0 / 0%);
   transition: all 0.7s ease-in-out;
}
dialog:open::backdrop {
   backdrop-filter: blur(6px);
   background-color: rgb(0 0 0 / 60%);
}
@starting-style {
   dialog:open::backdrop {
      backdrop-filter: blur(0);
      background-color: rgb(0 0 0 / 0%);
   }
}
#thumbImg {
   border-radius: 12px;
   cursor: pointer;
   transition: 0.5s;
}
#thumbImg:hover {
   filter: drop-shadow( 3px 3px 3px );
}
</style>
</head>

<body>
<div class="header"><h2>Abakada HTML Demo: <b>Modal Image</b> Example</h2></div>
<hr size=1 width=92%>

<center>
<h4>This example illustrates use of an image in a modal dialog.</h4>

<img id="thumbImg" src="//asp.net.ph/shared/images/sistine.jpg" title="The Sistine Chapel" width=200>

<p>Press Esc or click to close the modal image.</p>

<dialog id="imgBox">
   <img id="modalImg" width=700>
</dialog>

</center>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
<script>
var imgBox = document.getElementById ( "imgBox" );
var thumbImg = document.getElementById ( "thumbImg" );
var modalImg = document.getElementById ( "modalImg" );
thumbImg.onclick = function ( ) {
   modalImg.src = this.src;
   modalImg.title = this.title;
   imgBox.showModal ( );
}
modalImg.onclick = function ( ) {
   imgBox.close ( );
}
</script>
</html>