居中的javascript弹出窗口答案

【问题标题】：centering javascript pop-up window居中的javascript弹出窗口
【发布时间】：2012-12-18 08:26:27
【问题描述】：

这是我的 JavaScript 代码。

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname) {
    if (! window.focus) return true;
    var href;
    if (typeof mylink  == 'string')
        href=mylink;
    else
        href = mylink.href;
    window.open(href, windowname, 'width=500,height=500,scrollbars=yes');
    return false;
}
//-->
</SCRIPT>

仅使用上面的代码，弹出窗口完全符合我的要求，但它似乎紧贴在左上角。我希望弹出窗口居中显示。

我在这个网站上尝试了几个建议（例如：

var left = screen.width / 2 - w / 2;
var top = screen.height / 2 - h / 2;

但是在我已经拥有的代码中插入任何其他内容会使弹出窗口在同一浏览器的新选项卡中打开（忽略弹出功能）。

这就是我来这里要解决的问题。

此外，我想淡化背景以将读者的注意力吸引到弹出窗口上。有没有我可以扔进去的javascript sn-p？

【问题讨论】：

为什么这被否决了。他在问一个问题，有一个答案。

标签： javascript popup centering

【解决方案1】：

试试这个：

function popupW(mylink, windowname) {
    var href;
    var w = h = 500;
    var left = (screen.width/2) - (w/2);
    var top = (screen.height/2) - (h/2);

    if(!window.focus) {
        return true;
    }

    if(typeof mylink == 'string') {
        href = mylink;
    } else {
        href = mylink.href;
    }

    window.open(href, windowname, 'width='+w+', height='+h+', scrollbars=yes, top='+top+', left='+left);
    return false;
}
popupW('http://google.com', 'google');

背景窗口的淡化可以通过创建叠加来完成。

var overlay = document.createElement('div');
overlay.setAttribute('id', 'overlay');
document.body.appendChild(overlay);

使用以下css样式：

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
}

【讨论】：

我的弹出窗口居中，谢谢！但是，我无法从覆盖代码中获得任何响应。我怀疑我在做一些愚蠢的事情，比如将代码放在错误的位置或在我的 CSS 文档上放置错误的名称。这是我所做的：将第一个代码复制并粘贴到我的索引页面的
您应该将javascript代码添加到弹出函数中（就在return false语句之前）。此外，您应该收听关闭或未聚焦的弹出窗口以隐藏叠加层。
但我建议使用一些 javascript 库而不是弹出窗口。例如modals，如果您使用的是 Twitter 引导程序或 jQuery UI，甚至是支持 iframe 的灯箱克隆之一。它更容易使用，对用户的刺激更少。如果浏览器在我的屏幕上弹出一个新窗口，我个人通常会非常生气。此外，在某些浏览器中，弹出窗口被完全禁用。
我最初尝试使用 fancybox 和 shadowbox 来做背景淡入淡出/弹出窗口。我无法使用我用作可点击链接的图像映射热点:(相信我，我喜欢使用模态窗口而不是弹出窗口——它们更干净，看起来也不那么业余。但现在，直到我能对这个主题做一些专门的阅读，它们超出了我的技能水平。

【解决方案2】：

你可以试试这个

function popup(mylink, windowname)
{
    if (typeof(mylink) !== 'string') mylink=mylink.href;
    var l=(screen.width-500)/2, t=(screen.height-500)/2;
    window.open(mylink, windowname, 'width=500,height=500,scrollbars=1,left='+l+',top='+t);
    return false;
}

popup('http://heera.it', 'hit');

Example.

【讨论】：