Material Modal effect

by bizamajig

HTML

<div id="nav-container">
    <a href="#" id="burger">Menu</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>
<div id="content">
    <h2>Material Modal</h2>
    <p>Simple open modal effect, inspired by google's material design.</p>
    <a class="MatModal" href="#">Open</a>
</div>
<div id="MatModal-container">
    <span class="MatRound"></span>
    <div class="MatModal-content">
        <a href="#" id="close-MatModal">Close</a>
        <h1>Great !</h1>
        <p>Simple Modal</p>
    </div>
</div>

CSS

*{color:#fff;padding:0;margin:0;line-height:1.5em;}
body, html{
    height:100%;
    font-size:12px;
    font-family: helvetiva, verdana, sans-serif; 
    background:#333;
    overflow:hidden;
}
a {text-decoration:none;}
ul, li {list-style:none;}
p, h2 {margin-bottom:12px;}
#nav-container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px;
    border-bottom:1px solid #3498db;
    background:#2c3e50;
    overflow:hidden;
    box-sizing:border-box;
    -moz-transition:350ms;
    -webkit-transition:350ms;
    transition:350ms;
}
#burger {
  display:block;
  position: relative;
  width:25px;
  height:25px;
  text-indent:-9999px;
  overflow:hidden;
}
#burger:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 100%;
  height: 0.25em;
  background: #fff;
  box-shadow: 
    0 0.6em 0 0 #fff,
    0 1.2em 0 0 #fff;
}
#nav-container ul {
    display:block;
    position:absolute;
    top:0;
    left:65px;
    min-width:250px;
    border-left:1px solid #34495e;
    -moz-transition:350ms;
    -webkit-transition:350ms;
    transition:350ms;
    opacity:1;
}
#nav-container ul li {
    display:block;
    float:left;
    padding:0 10px;
    border-right:1px solid #34495e;
}
#nav-container ul li a {
    display:block;
    height:65px;
    line-height:65px;
}
#content {
    padding:35px 110px;
    width:100%;
    height:100%;
    margin:0 auto;
    margin-top:65px;
    overflow:auto;
    box-sizing:border-box;
    background:#2980b9;
    -moz-transition:350ms;
    -webkit-transition:350ms;
    transition:350ms;
}
.MatModal {
    display:block;
    float:left;
    margin-right:20px;
    width:70px;
    height:70px;
    line-height:70px;
    text-align:center;
    color:#fff;
    background:#3498db;
    overflow:hidden;
    -moz-transition:350ms;
    -webkit-transition:350ms;
    transition:350ms;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
}
#MatModal-container {
    display:none;
   ...

JavaScript

jQuery(function($){
    $('.MatModal').click(function(e){
        e.preventDefault();
        $('#MatModal-container').fadeIn(0,function(){
            $(this).addClass('show-MatModal');
            setTimeout(function(){
                $('#MatModal-container').addClass('seeModal');
            },250);
        });
    });
    $('#close-MatModal').click(function(e){
        e.preventDefault();
        closeMatModal();
    });
    function closeMatModal(){
        $('#MatModal-container').removeClass('seeModal show-MatModal');
        setTimeout(function(){
            $('#MatModal-container').fadeOut(150);
        },550);
    };
});