Alert Dialog
- Open dialog by clicking on the "Display Dialog" button
- Dismiss the alert dialog by clicking the close button (what receives focus), pressing the escape key, OR for mouse users: clicking the mouse anywhere outside the dialog
HTML Source Code
<!-- html code used to trigger the dialog -->
<button type="button" id="alert-trigger">Display Dialog</button>
Dialog Source Code (HTML)
<!-- container for the alert dialog, must have role="alertdialog" -->
<div id="continue-dialog" role="alertdialog" tabindex="-1" aria-labelledby="admessagehead1" aria-describedby="admessagebody1">
<h2 id="admessagehead1">Warning</h2>
<!-- older specs recommend adding role="document" to this message, latest specification drafts do not, and NVDA will not work if role="document" is applied -->
<p id="admessagebody1">To continue you must ensure you have received your confirmation number</p>
<button type="button" id="close-char-modal">Close</button>
</div>
JavaScript Source Code
Dependencies:
- JQuery
// clicks on the "Display Dialog" button
$('#alert-trigger').on('click', function (e) {
// Stopping Propagation so the click listener attached to the document (see below)
// does not consume this click. Without `e.stopPropagation()`, this event would fire
// right before the click would bubble up to the document, also firing the event that
// closes the alert dialog (any mouse clicks anywhere outside of the alert dialog will
// close the dialog and return focus to the initial trigger)
e.stopPropagation();
$('#fullContainer').attr('aria-hidden', 'true');
$('#continue-dialog').show(); // display the alert dialog
$('#close-char-modal').focus(); // place initial focus on an active element inside dialog
});
// clicks on the "Close" button (within dialog)
$('#close-char-modal').on('click', function () {
$('#fullContainer').removeAttr('aria-hidden');
$('#continue-dialog').hide();
$('#alert-trigger').focus(); // when dialog is dismissed, focus must be put back on the element used to trigger it
});
// the alert dialog's keyboard events
$('#continue-dialog').on('keydown', function (e) {
if (e.which === 27) { // ESCAPE KEY
// Dismiss the dialog with escape key
$('#close-char-modal').click();
} else if (e.which === 9) { // TAB or SHIFT + TAB
e.preventDefault(); // To trap focus within the dialog
}
});
// clicking anywhere outside of the dialog while the dialog is
// open will close the dialog and return focus to the trigger
$(document).on('click', function (e) {
if (!$(e.target).closest('#continue-dialog')[0] && $('#continue-dialog').is(':visible')) {
$('#fullContainer').removeAttr('aria-hidden');
$('#continue-dialog').hide();
$('#alert-trigger').focus();
}
});
CSS Source Code
#continue-dialog {
display: none;
position:absolute;
top:70px;
left:42%;
width: 250px;
margin: 0 auto;
text-align: center;
z-index: 15;
background-color: #fff;
border: 5px solid #ccc;
}
#continue-dialog h2 {
margin: 0;
padding-top: 0;
background-color: #ccc;
}
:focus {
outline: 2px solid;
}