jQuery Plugins › jQuery LightBox Plugins ›

Accessible Modal Popup With jQuery And CSS3

File Size: 8.82 KB
Views Total: 1337
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE8+, FireFox, Opera, Safari#Accessible#Modal#popup
Accessible Modal Popup With jQuery And CSS3

An accessible and minimal modal popup that uses CSS/CSS3 to toggle the visibility and utilizes jQuery to add/remove ARIA attributes based on the current open/close status.

How to use it:

1. Code the HTML for the modal popup.

<div class="modal" aria-hidden="true" role="dialog" aria-labelledby="modalTitle" aria-describedBy="modalDescription">
  <div class="modal-overlay modal-hide" tabindex="-1"></div>
  <div class="modal-container modal-hide">
    <div class="modal-wrapper modal-transition">
      <div id="modalDescription" class="modal-description vh">Beginning of dialog window.</div>
      <div class="modal-header">
        <button class="modal-close modal-hide">
          <svg class="icon-close icon" viewBox="0 0 32 32">
            <use xlink:href="#icon-close"></use>
          </svg>
        </button>
        <h2 id="modalTitle" class="modal-heading">This is a modal</h2>
      </div>
      <div class="modal-body">
        <div class="modal-content">
          Modal Content Here
        </div>
      </div>
    </div>
  </div>
</div>

2. Create an SVG based close button for the modal popup.

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="768" height="800" viewBox="0 0 768 800"><defs><g id="icon-close"><path class="path1" d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path></g></defs></svg>

3. Create a trigger button to toggle the modal popup when needed.

<button class="modal-show">Show modal</button>

4. The required CSS & CSS3 rules for the modal popup.

.modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
}

.modal.is-visible {
  visibility: visible;
}

/* Prevent scrolling on <html> when `.modal` is visible */
.no-scroll {
  overflow: hidden;
}

/* Modal Overlay & Container */
.modal-overlay,
.modal-container {
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease 0.3s, opacity 0.3s ease;
}

.modal-overlay {
  background: hsla(0, 0%, 0%, 0.5);
}

.modal.is-visible .modal-overlay,
.modal.is-visible .modal-container {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Allow scrolling on `.modal-container` in case `.modal-wrapper` is taller than the viewport */
.modal.is-visible .modal-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch; 
}

/* Modal Wrapper */
.modal-wrapper {
  position: absolute;
  z-index: 10000;
  top: 3em;
  left: 50%;
  width: 100%;
  max-width: 600px;
  margin-left: -50%;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
}

/* Modal Transition */
.modal-transition {
  transition: visibility 0.3s 0.12s, opacity 0.3s 0.12s, transform 0.3s 0.12s;
  transform: translateY(-10%);
  opacity: 0;
}

.modal.is-visible .modal-transition {
  transform: translateY(0);
  opacity: 1;
}

.modal-header,
.modal-content {
  padding: 1em;
}

/* Modal Header */
.modal-header {
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
  border-bottom: 1px solid #e8e8e8;
}

/* Modal Heading */
.modal-heading {
  font-size: 1.125em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Modal Close Button */
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.125em;
  color: #aaa;
  background: none;
  border: 0;
}

.modal-close:hover {
  color: #777;
}

/* Modal Content */
.modal-content > *:first-child {
  margin-top: 0;
}

.modal-content > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 600px) {
  /* Modal Wrapper */
  .modal-wrapper {
    top: 6em;
    margin-left: -300px;
  }
}

5. Load the necessary jQuery JavaScript library (slim build for better performance) at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. Cache the selectors

var html = $('html'),
    demo = $('.demo'),
    modal = $('.modal'),
    modalShow = $('.modal-show'),
    modalHide = $('.modal-hide'),
    modalWrapper = $('.modal-wrapper');

7. Show & hide the modal and toggle the CSS classes & ARIA attribute as follows:

// Modal Show
modalShow.on('click', function(e) {
  e.preventDefault();
  html.addClass('no-scroll');
  modal.addClass('is-visible');
  demo.attr('aria-hidden', 'true');
  modal.attr({
    'aria-hidden': 'false',
    'open': 'true',
    'tabindex': '0'
  });
});

// Modal Hide
modalHide.on('click', function(e) {
  e.preventDefault();
  html.removeClass('no-scroll');
  modal.removeClass('is-visible');
  demo.attr('aria-hidden', 'false');
  modal.attr('aria-hidden', 'true');
  modal.removeAttr('open tabindex');
});

8. Prevent the toggle event from bubbling.

modalWrapper.on('click', function(e) {
  e.stopPropagation();
});

This awesome jQuery plugin is developed by cbracco. For more Advanced Usages, please check the demo page or visit the official website.