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

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);將彈出框添加到頁面的開頭$(body).prepend(popup); ，這意味着它不會受到任何其他元素的影響