Upon clicking a button (refer to image below and take note of the scroll bar position), a div pop up is triggered through Javascript.
View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview
However, when the button is clicked, the pop-up appears at the very TOP of the page.
View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRWjFPS0xEV0tTeFk/preview
I am seeking assistance to make the pop-up appear centered exactly where the page is scrolled when the button is clicked.
Below is the code. Any help would be greatly appreciated! Thank you!
Javascript:
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
HTML:
<a href="#" id="pop" ><li style="float:right; margin-left:5px; list-style-type:none; line-height:0px; padding-top:20px;"><i class="fa fa-share-square fa-lg"></i></li></a>
<br />
<form id="overlay_form" style="display:none">
<a href="#" id="close" >Close</a>
<h2> Hello, World.</h2>
Share buttons here :-)
</form>