jQuery Profile Popup

HTML

<div class="profile">
    <div class="profile-image"></div>
    <div class="profile-inner">
         <h5>Lindsay Cooper</h5>

        <p>Web: http://www.example.com</p>
        <p>Front-End UX Designer</p>
        <p><a href="#" class="read-bio" rel="001">Read Bio</a>

        </p>
    </div>
    <div class="box">
        <div class="box-1">
            <p class="lead">POSTS</p>
             <h2>132</h2>

        </div>
        <div class="box-2">
            <p class="lead">FAVORITES</p>
             <h2>607</h2>

        </div>
        <div class="box-3">
            <p class="lead">IMAGES</p>
             <h2>67</h2>

        </div>
        <div class="box-4">
            <p class="lead">FOLLOWERS</p>
             <h2>632</h2>

        </div>
    </div>
    <div id="bio-001" class="bio">
        <div class="inner">
            <div class="close-bio"><a href="#" class="close-bio-link" rel="001">X</a>

            </div>
             <h5>Lindsay Cooper</h5>

            <p>Morbi volutpat odio id mi imperdiet id lacinia magna tristique. Vivamus tempus posuere viverra. Fusce arcu erat, sagittis faucibus pulvinar congue, tristique quis risus.</p>
            <p>Pellentesque in magna condimentum arcu faucibus ultrices vel sit amet purus. Proin turpis ante, luctus in pellentesque vel, posuere feugiat tortor.</p>
        </div>
    </div>

CSS

div.profile .box {
    position:absolute;
    bottom:0;
}
div.profile .box-1, div.profile .box-2, div.profile .box-3, div.profile .box-4 {
    width:100px;
    float: left;
    color:#FFF;
    text-align: center;
    padding:0;
    margin:0 auto;
    background: #1abc9c;
}
div.profile .box-4 {
    background: #3498db;
}
div.profile .box-2 {
    background:#e74c3c;
}
div.profile .box-3 {
    background:#f1c40f;
}
div.profile .box-1 h2, div.profile .box-2 h2, div.profile .box-3 h2, div.profile .box-4 h2 {
    font-size:42px;
    line-height:42px;
    color:#fff;
    margin:0;
}
p.lead {
    font-size: 1.71875em;
    line-height: 1.6;
}
div.profile .profile-image {
    background: url('http://i.imgur.com/5lpPelu.png');
    background-repeat: no-repeat;
    background-position: center center;
    height:126px;
    width:126px;
    position: absolute;
    top:10px;
    right:10px;
}
div.profile {
    font-family:"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    cursor: default;
    width:400px;
    height:250px;
    border:1px solid #DDD;
    padding:0px;
    position: relative;
    background: #48C9B0;
}
div.profile .profile-inner {
    padding:15px;
    position: relative;
}
div.profile .read-bio {
    color: #3498DB;
}
div.profile h5 {
    font-size: 27px;
    color:#FFF;
    margin: 0;
    line-height:46px;
}
div.profile p {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.bio {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ccc;
    text-align: left;
    background: #000 url('http://i.imgur.com/F56ccwl.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}
.bio p {
    line-height:1.6em;
}
.bio .close-bio-link {
    color: #ccc;
    font-weight: bold;
    border: 2px solid #FFF;
    border-radius: 50px;
    padding:5px 10px 5px 10px;
    text-align:center;
   ...

JavaScript

jQuery(window).load(function () {
    bioLinks();
});

function bioLinks() {
    $('.read-bio').click(function () {
        $('#bio-' + $(this).attr('rel')).fadeIn();
        return false;
    });
    $('.close-bio-link').click(function () {
        $('#bio-' + $(this).attr('rel')).fadeOut();
        return false;
    });
}