asp.net.ph Source Code Viewer

<html>
<head>
<title>Abakada HTML Demo: dialog Element</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
dialog {
   border: none !important;
   border-radius: 0 20px 0;
   background-color: beige;
   opacity: 0;
   transform: scaleY( 0 );
   transition: all 0.7s allow-discrete;
}
dialog:open {
   opacity: 1;
   transform: scaleY( 1 );
}
@starting-style {
   dialog:open {
      opacity: 0;
      transform: scaleY( 0 );
   }
}
dialog::backdrop {
   background-color: rgb(0 0 0 / 0%);
   transition: background-color 0.7s;
}
dialog:open::backdrop {
   background-color: rgb(0 0 0 / 75%);
}
@starting-style {
   dialog:open::backdrop {
      background-color: rgb(0 0 0 / 0%);
   }
}
</style>
</head>

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

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

<button class="show">Show Modal</button>

<h4>Do not panic. No action will be taken <img src="/shared/biggrin.gif" width="15" align="absmiddle">.</h4>

<dialog id="msgBox">
   <p>This procedure will reformat your hard disk.</p>
   <p>Do you wish to proceed?</p>
   <center><button class="close">Confirm</button></center>
</dialog>

</center>

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

</body>
<script>
   const msgBox = document.getElementById ( "msgBox" );
   const showBtn = document.querySelector ( ".show" );
   const closeBtn = document.querySelector ( ".close" );

   showBtn.addEventListener ( "click", ( ) =>
      { msgBox.showModal ( ); }
   );
   
   closeBtn.addEventListener( "click", ( ) =>
      { msgBox.close ( ); }
   );
</script>
</html>