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();
    if (popOver === false){
        $("#popOver").addClass("showOver");
        $("#popUp").addClass("showUp");
        popOver = true;
    } else{
        $("#popOver").removeClass("showOver");
        $("#popUp").removeClass("showUp");
        popOver = false;
    }
});


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