Paul R. Hayes - Modal

www.paulrhayes.com/2011-04/css-modal-follow-up/ Really nice modal that is reasonably simple. Taken a little out, like the ie stuff....only really care about Chrome/FF.

by PAEz

HTML

<section id="respond" class="modal">
    <div>
        <h3>Comment</h3>
        
        <form id="commentform" action="/www.paulrhayes.com/wp-comments-post.php" method="post">
            <fieldset>
                <legend>Post a comment</legend>
                
                <div>
                    <label for="author">Name</label>
                    <input id="author" name="author" class="text required" type="text" value="" size="30" maxlength="50" tabindex="3" placeholder="Name" />
                </div>
                
                <div>
                    <label for="email">Email</label>
                    <input id="email" name="email" class="text required" type="text" value="" size="30" maxlength="50" tabindex="4" placeholder="Email" />
                </div>
                
                
                <div>
                    <label for="comment">Comment</label>
                    <textarea id="comment" name="comment" class="text required" cols="45" rows="8" tabindex="5" placeholder="Comment"></textarea>
                </div>
            </fieldset>
            <fieldset class="submit">
                <input type="hidden" name="comment_post_ID" value="141" />
                <input id="submit" name="submit" class="submit" type="submit" value="Post Comment" tabindex="6" />
                
                <a href="/www.paulrhayes.com/2011-04/css-modal-follow-up/#close" class="close" title="Close" tabindex="7"><span>Cancel</span></a>
                
                <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="5e53258eae" /></p>                            </fieldset>
        </form>
    </div>
</section>


<div id="wrapper">
<a class="respond" href="/www.paulrhayes.com/2011-04/css-modal-follow-up/#respond">Post a com­ment</a>
<a href="/www.paulrhayes.com/2011-04/css-modal-follow-up/#close"  class="close">Hide</a>
</div>

CSS

.hidden{
 display:none;  
}
#wrapper{
 opacity:1.0;
  -moz-transition: opacity 300ms ease-in;    
}

#wrapper.hide{
 opacity: 0.5;
     -webkit-transition: opacity 300ms ease-in-out;
 -moz-transition: opacity 300ms ease-in;   
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    z-index: 10000;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    display: none;
}

.modal.intermediate {
    display: block;
}

.modal.active {
    opacity: 1;
}
.modal > div {
    width: 362px;
    background: #fff;
    position: relative;
    margin: 10% auto 0;
    -webkit-animation: bounce 500ms linear;
    padding: 15px;
    border-radius: 7px;
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    background: #eee;
    background: -moz-linear-gradient(#fff, #ccc);
    background: -webkit-linear-gradient(#fff, #ccc);
    text-shadow: 0 1px 0 #fff;
}

.modal.minimise > div {
    -webkit-animation-name: minimise;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale3d(0.1,0.1,1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
}
75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
}
100% {
    -webkit-transform: scale3d(1,1,1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
}
}

@-webkit-keyframes minimise {
    0% {
        -webkit-transform: scale3d(1,1,1);
}
100% {
    -webkit-transform: scale3d(0.1,0.1,1);
}
}

.modal a.close {
    text-decoration: none;
}
.modal a.close span {
    text-decoration: underline;
}

.modal a.close:after {
    content: 'X';
    font-size: 16px;
    display: block;
    position: absolute;
    right: -14px;
    top:...

JavaScript

// just to make things a little more readable
jQuery.fn.isPresent = function() {
    return this.length > 0;
};

$(function() {

    /* Comment box modal */
    if ($('#respond').isPresent()) {

        (function($respond, $body) {
            $('a.respond').click(function(evt) {
                evt.preventDefault();
                
                $('div#wrapper').addClass('hide');
                
                $respond.addClass('intermediate');
                setTimeout(function() {
                    $respond.addClass('active');
                    //$('div#wrapper').addClass('hidden');
                }, 100);
                setTimeout(function() {
                //    $respond.addClass('active');
                    $('div#wrapper').addClass('hidden');
                }, 300);

                $respond.find('input.text').first().focus();

                $('a.close').click(function(evt) {
                    evt.preventDefault();
                    close();
                });

                $respond.find('form').submit(function(evt) {
                    close();
                });

                $body.keyup(function(evt) {
                    if (evt.keyCode === 27) {
                        close();
                    }
                });

            });

            function close() {
                $respond.addClass('minimise');
                $respond.removeClass('active');
                $('div#wrapper').removeClass('hidden');
                
                setTimeout(function() {
                $('div#wrapper').removeClass('hide');   
                }, 50);
                
                setTimeout(function() {
                    $respond.removeClass('intermediate minimise');
                //$('div#wrapper').removeClass('hide');    
                }, 550);
                $body.unbind('keyup');
                $respond.find('a.close').unbind('click');

                                
            }

       ...