javascript - 具有不同窗口大小的jQuery弹出位置

Question

我想使用 JavaScript 来控制不同大小窗口的弹出位置。

我该怎么做？

Answer 1

我假设您正在谈论标准window.open弹出窗口，以防万一，请告诉我们。

你要做的很简单。首先使用对象找出客户的屏幕尺寸screen：

var screenWidth = screen.width;
var screenHeight = screen.height;

现在我们有了屏幕的大小，例如，我们可以使用它来计算 800x600 尺寸的居中弹出窗口的左上角：

var top = screenWidth/2 - 300;
var left = screenHeight/2 - 400;

现在，我们准备好了：

var myCenteredWindow = window.open(myURL,'myFancyPopup','width=800,height=600,scrollbars=no,top=' + top + ',left=' + left + '');

请注意，这可以很容易地写成一行（当您了解正在发生的事情时）：

var myCenteredWindow = window.open(myURL,'myFancyPopup','width=800,height=600,scrollbars=no,top=' + screen.width/2 - 300 + ',left=' + screen.height/2 - 400 + '');

Answer 2

要控制不同窗口大小的弹出对话框窗口，使用窗口的宽度和对话框的宽度来计算对话框的位置，例如：如果您需要对话框出现在屏幕中间而不管窗口宽度，试试这个：

var windowWidth = $(window).width(); //get the windows width;
var dialogWidth = $("#popup-dialog").width(); // get the dialog width;
var pLeft = (windowWidth - dialogWidth) / 2;
$("#dialog").css("left", pLeft);