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);
}
#popOver{
    display:none;
    height:600px;
    width: 660px;
    background:#fff;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-330px;
    z-index:3;
}
#popOver.showOver,
#popUp.showUp{
    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();
    $("#popOver").toggleClass("showOver", !popOver);
    $("#popUp").toggleClass("showUp", !popOver);
    popOver = !popOver;
});


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