Alert Dialog

<!-- html code used to trigger the dialog -->
<button type="button" id="alert-trigger">Display Dialog</button>

<!-- 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>

// 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();
    }
});

#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;
}