【Javascript】ダイアログを作成するAccessible Modal Dialog

Accessible Modal Dialogはモーダルダイアログを作成することができます。

HTML

<div class="dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">  
<h1 id="dialog-title">Site Navigation</h1>
<p id="dialog-description" class="sr-only">Description goes here</p>
<nav>
<ul>
<li><a href="one.html">Link One</a></li>
<li><a href="two.html">Link Two</a></li>
<li><a href="three.html">Link Three</a></li>
</ul>
</nav>
<button type="button" aria-label="Close Navigation" class="close-dialog"> <i class="fa fa-times"></i> </button>
</div>

The Overlay

<body>  
<div class=“body-content”></div>
<div class=“dialog”></div>
<div class=“dialog-overlay”></div>
<body>  
 
Accessible Modal Dialog

【Javascript】ダイアログを作成するAccessible Modal Dialog

  • LATEST
  • RELATED
  • POPULAR