Javascript

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

August 12, 2016
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>