Simple Adaptive Modal Dialog Plugin With jQuery And CSS3

A simple, responsive, adaptive jQuery modal & dialog component that uses CSS3 transitions and transforms to smoothly adjust the height & weight to fit within the viewport.

How to use it:

1. The html to create a dialog box with custom title, body and action button as follows:

<div class="dialog">
  <span class="dialog__close">&#x2715;</span>
  <h2 class="dialog__title">Dialog Title</h2>
  <p class="dialog__content">Dialog Content</p>
  <button class="dialog__action">Action Button &#8594;</button>
</div>

2. You might also need a trigger element to toggle the dialog.

<button class="dialog__trigger">Open Dialog</button>

3. The primary CSS styles for the dialog.

.dialog {
  background: #f1f1f1;
  width: 70%;
  position: absolute;
  left: calc(50% - 35%);
  top: 0;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(51, 51, 51, 0.4);
  border: 3px solid #333333;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 180ms ease-in;
  transition: all 180ms ease-in;
}

.dialog.dialog--active {
  top: 10%;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}

.dialog .dialog__close {
  font-size: 2rem;
  line-height: 2rem;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  padding: 15px;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.dialog .dialog__close:hover { color: #E74C3C; }

.dialog .dialog__title {
  font-size: 2rem;
  font-weight: 100;
  margin: 0;
  padding: 0 0 15px 0;
  border-bottom: 2px solid #333333;
}

.dialog .dialog__content {
  font-size: 1.1rem;
  line-height: 2rem;
}

.dialog .dialog__action {
  margin: 0;
  font-size: 1rem;
}

4. Make the dialog responsive by adding the following CSS snippets into media queries.

@media (max-width: 600px) {

.dialog {
  width: 90%;
  left: calc(50% - 45%);
}

}

5. Place the latest version of jQuery JavaScript library at the end of the document.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> 

6. The core JavaScript.

function dialog() {
  
  var dialogBox = $('.dialog'),
      dialogTrigger = $('.dialog__trigger'),
      dialogClose = $('.dialog__close'),
      dialogTitle = $('.dialog__title'),
      dialogContent = $('.dialog__content'),
      dialogAction = $('.dialog__action');

  // Open the dialog
  dialogTrigger.on('click', function(e) {
    dialogBox.toggleClass('dialog--active');
    e.stopPropagation()
  });

  // Close the dialog - click close button
  dialogClose.on('click', function() {
    dialogBox.removeClass('dialog--active');
  });

  // Close the dialog - press escape key // key#27
  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      dialogBox.removeClass('dialog--active');
    }
  });

  // Close dialog - click outside
  $(document).on("click", function(e) {
    if ($(e.target).is(dialogBox) === false && 
        $(e.target).is(dialogTitle) === false &&
        $(e.target).is(dialogContent) === false &&
        $(e.target).is(dialogAction) === false) {
      dialogBox.removeClass("dialog--active");
    }
  });

};

// Run function when the document has loaded
$(dialog);

---

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