0

我有一个使用 jQuery 的弹出窗口，但它呈现在与 DIV 相同的位置。我希望弹出窗口呈现在页面中间。是否可以？如果是，那么如何？

我的 CSS：

.newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
}

HTML：

 <div class='newpopup'>
</div>
<button>popup</button>

JavaScript：

function popup() {
    alert('test');
    var popup = $('.newpopup');
    popup.draggable();
    popup.resizable();
    popup.html('<p>Where is pancakes house?</p>');
    popup.show('fast');
}
$(document).ready(function(){
  $('button').click(function(){
     popup();
  });
})
4

2 回答 2

1

设置您的弹出 cssposition : absolute并使用top & left属性来设置您的弹出位置。

  .newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
    position:absolute;
    top:50%;
    left:50%;
}

编辑

我创建了一个 fiddle ，Jsfiddle它在​​这里完美运行，检查一下。

于 2012-06-18T09:41:24.860 回答
1

您需要获取屏幕的宽度和高度，以及您创建的框

var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();

然后你需要设置position:absolute;。.newpopup以及它top的left位置

var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });

代码可以精简，但拆分起来更容易理解。

编辑：您可以使用 将弹出框添加到页面的开头$(body).prepend(popup);，这意味着它不会受到任何其他元素的影响

于 2012-06-18T09:53:07.503 回答