Fullscreen jQuery Modal Box with Button Morph Animation

A small jQuery script to create a morphing button that expands into a responsive fullscreen overlay like a modal box.

Basic Usage:

1. Wrap the modal content into an overlay container. The close button requires Bootstrap 3 CSS loaded in your document.

<div class="overlay">
  <span class="close glyphicon glyphicon-remove"></span>
  <div id="modal-content">
    <p>Modal content goes here</p>
  </div>
</div>

2. The CSS to style the fullscreen overlay.

.overlay {
  background: #2c3e50;
  position: absolute;
  opacity: 0;
  height: 2px;
  width: 225px;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  margin-left: -112.5px;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  transition: all 1s linear;
  color: white;
  box-sizing: border-box;
  overflow: hidden;
}

3. Create a morphing button to toggle the modal box.

<div class="btn">
  <p>Click me</p>
</div>

4. Style the morphing button in CSS whatever you like.

.btn {
  height: 65px;
  width: 225px;
  background: #2c3e50;
  display: table;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -112.5px;
  margin-top: -32.5px;
}

.btn p {
  display: table-cell;
  vertical-align: middle;
  color: white;
  font-size: 1.1em;
}

5. Include the latest version of jQuery library on your web page.

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

6. The Javascript to enable the button morph animation.

var width = $('body').width();
var height = $('body').height();
var animationDelay = 3000;
var offset = 50;

$('.btn').click(function(){
  $(this).css({
    'display' : 'none'
  });
  
  $('.overlay').css({
    "width" : '100%',
    'margin-left' : 0,
    'opacity' : 1,
    'left': 0,
    'right' : 0
  });
    
  setTimeout(function(){
      $('.overlay').css({
        'height' : "100%",
        'top' : 0
      });
      
    }, 1000);

   $(".box").each(function(){
    blah(this);
    })
  
});

$('.close').click(function(){
  $('.overlay').css({
    'height': '2px',
    'top' : '50%'
  });
  
  setTimeout(function(){
      $('.overlay').css({
        'width': '225px',
        'left' : '50%',
        'margin-left' : '-112.5px',
        'opacity' :0
      });
  },1000);
  
 
  setTimeout(function(){
    $('.btn').show();
  },2000);

---

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