Creating an 'Are You Sure?' Modal

Creating an 'Are You Sure?' Modal.markdown

Creating an 'Are You Sure?' Modal

If you have a user using your site, and let's say its a secure site with a login, and that user wants to follow a link that you've provided, you'll need to make sure that they meant it, as navigating away will likely log the user out. You could open the link in a new tab by default, but then you're overriding the browser default behavior, which we know is rarely a good idea.

A Pen by Rob Copeland on CodePen.

License.

index.html

<section class="post">
<h1 class="primary-heading">Creating an 'Are You Sure?' Modal</h1>
<p class="sub-heading">For confirming that the user actually means to leave</p>
<div class="body-copy">
  <p>If you have a user using your site, and let's say its a secure site with a login, and that user wants to follow a link 
    that you've provided, you'll need to make sure that they meant it, as navigating away will likely log the user out. You could
    open the link in a new tab by default, but then you're overriding the browser default behavior, which we know is rarely a good idea.</p>
  <p>This modal will simply insert itself in the process and require the user to click a button to really navigate away. Optionally, the user
    can click a cancel link to return to what they were doing.</p>
  <p>I'd expect that user complaints of being accidentally logged out would decrease after implementing something like this.</p>
  <p>From an accessibility standpoint, the modal has appropriate aria roles for popup content, and the modal is navigable with 
    only the keyboard.</p>
  <p>Click these links below to give it a try.</p>
</div>
<a href="https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box" class="link js-confirm-modal">
  <i class="fa fa-link"></i>
  Implementing Aria's Dialog Role</a>
  <a href="http://webaim.org/techniques/keyboard/" class="link js-confirm-modal">
    <i class="fa fa-link"></i>
    Techniques for Keyboard-Only Access</a>
</section>

script.js

var focusHolder;

$('.js-confirm-modal').on('click', function (e) {
    e.preventDefault();
    focusHolder = e.target;
    var href = e.target.href;
  
    var title = 'Navigate Away?';
    var confirmText = 'I\'m Sure'; 
    var cancelText = 'Cancel';
    var content = 'Are you really sure you want to navigate away?' +
    'You may have to log in again when you come back.';
  
    var modal = $('<div class="modal" role="dialog">' +
      '<h1 class="modal__title">' + title + '</h1>' +
      '<div class="modal__content">' + 
      '<p>' + content + '</p></div>' + 
      '<div class="modal__actions">' + 
      '<a class="button modal__link modal__confirm"' +
      'href="'+ href +'">' + confirmText + '</a>' +
      '<button class="link modal__link modal__close">' + 
      cancelText + '</button>' +
      '</div></div>');
    var modalOverlay = $('<div class="modal-overlay"></div>');
  
    $('body').append(modal);
    $('body').append(modalOverlay);
    $('.modal__confirm').focus();
  });

$('body').on('click', '.modal-overlay, .modal__close', function () {
  $('.modal, .modal-overlay').remove();
  if (focusHolder) {
    focusHolder.focus();
  }
});

$(document).keyup(function(e) {
  if (e.keyCode === 27 && $('.modal').size() > 0) {
    $('.modal, .modal-overlay').remove();
    if (focusHolder) {
      focusHolder.focus();
    }
  }
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

// global demo styling
$primary-color: #56B949;
$secondary-color: #30499B;
$white: #fff;
$black: #333;
$grey: #F5F5F5;
$light-grey: #FCFCFC;
$heading-font-stack: 'Oswald', sans-serif;
$body-font-stack: 'Open Sans', sans-serif;

body {
  color: $black;
  background-color: $light-grey;
  font-family: $body-font-stack;
  font-size: .85em;
  transition: all .3s;
  
  @media (min-width: 30.625em) {
    font-size: 1em;
  }
  
  @media (min-width: 50em) {
    font-size: 1.1em;
  }
}

.post {
  background-color: $white;
  box-shadow: 2px 2px 3px $grey;
  padding: 2em;
  margin: 0 auto;
  transition: all .3s;
  
  @media (min-width: 30.625em) {
    margin: 1em auto;
    max-width: 30em;
  }
  
  @media (min-width: 50em) {
    max-width: 40em;
  }
}

.primary-heading {
  color: $primary-color;
  font-family: $heading-font-stack;
  font-size: 1.8em;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
}

.sub-heading {
  font-family: $heading-font-stack;
  font-size: 1.2em;
  font-style: bold;
  margin: 0;
}

.body-copy {
  font-size: 1.1em;
  line-height: 1.4;  
  max-width: 35em;
}

.link {
  background: none;
  border: none;
  padding: 0;
  color: $secondary-color;
  text-decoration: none;
  display: block;
  margin: 0.3em;
}

.link .fa {
  color: $primary-color;
}

.link:hover {
  text-decoration: underline;
}

.button {
  background-color: $primary-color;
  color: $white;
  margin-right: 1em;
  padding: 1em 2em;  
  text-decoration: none;
  transition: all .3s;
}

.button:hover {
  background-color: lighten($primary-color, 8%);
}

// modal styling
.modal-overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 0.6;
  z-index: 2;
}

.modal {
  background-color: $white;
  left: 0;
  margin: 0 auto;
  max-width: 25em;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 3;

  @media (min-width: 300px) and (min-height: 300px) {
    top: 30%;
  }
}

.modal__title,
.modal__content,
.modal__actions {
  padding: 1em;
}

.modal__title {
  font-family: $heading-font-stack;
  font-size: 1.5em;
  padding: 0.5em;
  margin: 0;
  background-color: $secondary-color;
  color: white;
}

.modal__link {
  display: inline-block;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />