Fullscreen Modal Using jQuery and CSS3 Transitions / Transforms

Makes use of CSS3 transitions / transforms and a bit of jQuery magic to create a fullscreen modal while shrinking and blurring the background content when the modal is launched.

How to use it:

1. Create the html for the fullscreen modal with a close button.

<div class="overlay">
  <i class="close">Close</i>
  <div class="message">
    ... modal content ...
  </div>
</div>

2. Create a trigger link to launch the fullscreen modal.

<a class="trigger">Launch the modal</a>

3. Wrap your main content into a container.

<div class="content">
  ... main content ...
</div>

4. The core CSS / CSS3 styles for the fullscreen modal.

.overlay {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 100;
  left: 0;
  top: 0;
  opacity: 0;
  transform: scale(0);
  transition: all .5s;
}

.overlay.overlayOpen {
  opacity: 1;
  transform: scale(1);
}

.overlay .close {
  font-size: 1.25em;
  font-style: normal;
  float: right;
  margin-top: 1em;
  margin-right: 1em;
  cursor: pointer;
}

.overlay .close:before {
  padding-right: .25em;
  font-family: FontAwesome;
  content: "x";
}

.message {
  font-size: 3em;
  font-weight: 100;
  width: 90%;
  height: 60%;
  text-align: center;
  margin: 1em auto;
}

5. Animate the main content when the modal is triggered.

.content {
  width: 90%;
  margin: 0 auto;
  transition: all .5s;
}

.content.overlayActive {
  transform: scale(0.9);
  -webkit-filter: blur(2px);
}

6. The core JavaScript (jQuery script) to enable the fullscreen modal.

var fsOverlay = function(){
  var body = $('body'),
      overlay = $('.overlay'),
      trigger = $('.trigger'),
      close = $('.close'),
      content = $('.content');
  
  openModal = function(e){
    e.preventDefault();
    content.addClass('overlayActive');
    overlay.addClass('overlayOpen');
  }
  
  closeModal = function(e){
    e.preventDefault();
    content.removeClass('overlayActive');
    overlay.removeClass('overlayOpen');
    
  }
  
  trigger.on("click", openModal);
  
  close.on("click", closeModal);
  
  body.on("keyup", function(e){
    if(e.keyCode == 27){
      close.trigger("click");
    }
  });
}

$(fsOverlay);

---

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