Question

我有一个使用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();
  });
})

Answer 1

设置弹出广告css position : absolute并使用top & left属性设置弹出窗口位置。

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

修改

我创造了一个小提琴，Jsfiddle它在这里完美运作，检查出来。

Answer 2

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

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);将弹出框添加到页面的开头，这意味着它不会受到任何其他元素的影响

如何重新定位我的jQuery弹出窗口？

2 个答案: