Question

Hello Friends我只是想在博客博客上添加一个像facebook一样的pop pop，所以我有一个问题。我希望弹出窗口显示位置绝对的网页中心..下面是我正在使用的代码..提前感谢..

<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

为 #exopopup ：

删除此css样式

bottom: 0;
right: 0;

Answer 3

一个有效的JSFIDDLE示例：

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

使用样式 - absolute与left: 50%元素并将其设置在中间 margin-left:-[half of the element size]

如何对齐窗口的弹出窗口

3 个答案: