如何對齊窗口的彈出中心

Question

你好朋友，我只是想添加一個Facebook的彈出框喜歡博客博客，所以我有一個問題。我想彈出出現與位置absolute..below網頁的中心，這是我使用的代碼..在此先感謝..

<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 &amp; 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&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;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> 

Answer 1

您可以創建這樣一個簡單的調整大小功能：

function resize(popup) { 
    var y = $(window).scrollTop(); 
    var winH = $(window).height(); 
    var winW = $(window).width(); 
    popup.css('top', y + 20); 
    popup.css('left', winW/2-popup.width()/2); 
} 

你也應該打電話的時候，曾經在瀏覽器窗口大小的上述功能：

$(document).ready(function() { 
    $(window).resize(function() { 
    resize($('#popupexe')); 
    }); 
}); 

Answer 2

只是刪除這個CSS樣式#exepopup：

bottom: 0; 
right: 0; 

Answer 3

一個工作的jsfiddle例如：

http://jsfiddle.net/fixit/u8tbhhse/

使用樣式 - absolute與元素的left: 50%並在中間設置它通過 margin-left:-[half of the element size]