Popup below the click

Assign Popup below the click

by MarmiK

HTML

<div id="header"></div>
<div id="open">Click here to open the popup</div>
<div id="popup">
    <div class="popup-wrapper">
        <div class="content">
             <h1>TEST</h1>

        </div>
    </div>
</div>
<div id="footer"></div>

CSS

body {
    padding:0;
    margin:0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
#header, #footer {
    float:left;
    display:block;
    height:100px;
    width:100%;
    background:blue;
}
#open {
    float:left;
    width:100%;
    display:block;
    height:40px;
    cursor: pointer;
    background:yellow;
}
#popup {
    display: none;
    position:absolute;
    height: 70px;
}
#popup .popup-wrapper {
    background-color: #0D1014;
    background-color: rgba(13, 16, 20, 0.0);
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom 0;
}
#popup .content {
    background-color: #E8F0F3;
    border: 1px solid #FFFFFF;
    width: 230px;
    position: relative;
    padding: 11px;
    overflow: hidden;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}
.no-scroll {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

JavaScript

$("#popup").click(function (e) {
    //if ($(e.target).closest(".content" /*or any other selector here*/).length > 0) {return false;}
    $("#popup").fadeOut(200);   
});

//This is just to open the popup
$('#open').click(function (e) {
    var left=0;
    left = e.pageX/2;
    $("#popup").css({
        "top": e.pageY+18 +"px", //18 is normal line height(general size)
        "left": left + "px"
    });
    $("#popup").show(); 
});