Pop up exploration

by Emily Humphrey

HTML

<a href="#" class="btn sw">Show</a>

<a href="#" class="btn hd">Hide</a>

<div id="wrapper"></div>
<div id="popUp"></div>
<div id="popOver"></div>

CSS

#wrapper {
    display:block;
    height:2000px;
    width:960px;
    margin:0 auto;
    background:url("http://i.imgur.com/x9K3m1L.png") repeat;
}
#popUp {
    display:none;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:2;
    background:rgba(141, 41, 139, .8);
}
body.estimate #popOver {
    display:none;
    height:600px;
    width: 660px;
    background:#fff;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-330px;
    z-index:3;
}
body.estimate #popOver, body.estimate #popUp {
    display:block;
}
.btn {
    display:block;
    padding:20px;
    background:#222;
    color:#ccc;
    position:fixed;
    top:0;
    z-index:6;
}
.btn:active {
    background:#444;
}
.btn.sw {
    left:0;
}
.btn.hd {
    right:0;
}
}

JavaScript

var popOver = false;

$('a.sw, a.hd').click(function (event) {
    event.preventDefault();
    $("body").toggleClass("estimate", !popOver);
    popOver = !popOver;
});


/*var scroll = $(window).scrollTop();
    var overTop = scroll + 50;
    console.log(overTop);
    $("#popOver").css("top":scroll);*/