Hello everyone, I'm attempting to integrate a Facebook popup like box into my Blogger blog. However, I am facing an issue where I want the popup to appear in the center of the webpage using absolute positioning. Below is the code that I am currently using. Any help would be greatly appreciated. Thank you.
<style type='text/css'>
#exepopup {
background-color: none;
position:absolute;
z-index: 9999;
display: none;
padding: 0px;
border: 10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box;
/* for Safari */
background-clip: padding-box;
/* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
width: 40%;
height: 50%;
overflow: auto;
/* Recommended in case content is larger than the container */
margin: auto;
/* Center the item vertically & horizontally */
/* Break it out of the regular flow */
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Set the bounds in which to center it, relative to its parent/container */
}
#exepopup span {
font-size: 12px !important;
font-weight: normal !important;
}
#exepopup h1 {
background: #6d84b4 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% no-repeat;
border: 1px solid #3b5998 !important;
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 700 !important;
padding: 5px !important;
margin: 0 !important;
font-family: arial !important;
overflow: hidden !important;
}
.exepopupdata {
font-size: 12px !important;
font-weight: normal !important;
height: 275px !important;
padding: 1px !important;
background: #fff !important;
border-bottom: 2px solid #ddd;
overflow: show !important;
}
#exepopupfooter {
text-align: left;
font-size:12px;
background: #F2F2F2 !important;
height: auto !important;
padding: 10px 10px 10px 10px !important;
overflow: hidden !important;
}
#exepopupclose {
float: right;
background-color: none !important;
border: 0px solid #ccc !important;
color: #111 !important;
font-weight: normal !important;
padding: 5px 8px 5px 8px !important;
text-decoration: none !important;
display: inline-block !important;
font-family: arial !important;
outline: none !important;
font-size: 12px !important;
margin: 0px !important;
}
#exepopupclose:active {
top: 0;
left: 0;
}</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function exepopupfunc() {
var sec = 60
var timer = setInterval(function() {
$("#exepopupfooter span").text(sec--);
if (sec == 0) {
$("#exepopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var exepopupwindow = jQuery(window).height();
var exepopupdiv = jQuery("#exepopup").height();
var exepopuptop = jQuery(window).scrollTop()+50;
jQuery("#exepopup").css({"top":exepopuptop});}
jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var exepopupww = jQuery(window).width();
//var exepopupwww = jQuery("#exepopup").width();
//var exepopupleft = (exepopupww-exepopupwww)/2;
var exepopupleft = 500;
//var exepopupwindow = jQuery(window).height();
//var exepopupdiv = jQuery("#exepopup").height();
//var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;
jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();
jQuery("#exepopupclose").click(function() {
jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="exepopup">
<h1>Join Us On Facebook</h1>
<div class="exepopupdata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FEXEIdeas2010&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=260" scrolling="no" frameborder="0" style="border:none; overflow:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div>
<div id="exepopupfooter">Please Wait <span>20</span> Seconds<a href="#" id="exepopupclose" onclick="return false;">Close X</a></div></div>