Fullscreen jQuery Modal Box with Button Morph Animation
File Size: | 1.93 KB |
---|---|
Views Total: | 4372 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.