Minimal 3D Modal Plugin With jQuery And CSS3 - Awesomodals

Awesomodals is a lightweight jQuery plugin which provides a simple way to create a 3D flipping modal window using CSS3 transitions and transforms.

How to use it:

1. Put the latest version of jQuery library and the jQuery Awesomodals plugin at the end of your html document.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="dist/jquery-awesomodals.min.js"></script>

2. The basic html structure for the modal window.

<div class="dialogs">
  <div class="dialog" id="modal-demo">
    <div class="dialog__content">
      <header class="dialog__header">
        <h1 class="dialog__title">Modal Title</h1>
      </header>
      <div class="dialog__body">
        Modal Body
      </div>
      <footer class="dialog__footer">
        <button class="btn" data-modal-close>Close</button>
      </footer>
    </div>
  </div>
  <div class="dialog-overlay"></div>
</div>

3. Create a button to toggle the modal window.

<button data-modal="#modal-demo" data-modal-init>Open up!</button>

4. Active the plugin by calling the function on the top element.

$('.demo').awesomodals();

5. Style the modal window with the following CSS / CSS3 rules.

.dialog {
  max-width: 480px;
  position: fixed;
  left: 50%;
  top: 2em;
  transform: translateX(-50%);
  z-index: 2000;
  visibility: hidden;
  backface-visibility: hidden;
  perspective: 1300px;
}

.dialog--active { visibility: visible; }

.dialog--active .dialog__content {
  opacity: 1;
  transform: rotateY(0)
}

.dialog--active ~ .dialog-overlay {
  opacity: 1;
  visibility: visible
}

.dialog__content {
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: .5s ease-in-out;
  opacity: 0;
  transform-style: preserve-3d;
  transform: rotateY(-70deg)
}

.dialog__header {
  background: #cb4a70;
  color: #fff
}

.dialog__title {
  margin: 0;
  text-align: center;
  font-weight: 200;
  line-height: 2em
}

.dialog__body { padding: 2em }

.dialog__footer {
  margin: 0 2em;
  padding: 2em 0;
  text-align: right;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.dialog__footer .btn { font-size: 1.5em }

.dialog-overlay {
  content: "";
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0,0,0,0.5);
  transition: all .6s
}

6. Default plugin settings.

$('.demo').awesomodals({

  // debug mode
  debug: false,

  // data attributes
  selectorOpen: '[data-modal-init]',
  selectorClose: '[data-modal-close]',
  selectorModal: '[data-modal-item]',

  // CSS classes
  itemOverlay: '.dialog-overlay',
  classActive: 'dialog--active',

  // click the overlay to close the modal
  optionOverlayActive: true,

  // callback functions
  onModalOpened: null,
  onModalClosed: null
  
});

Change log:

2016-07-18

• Fixed Not working in firefox

---

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