Question

我实现了一个JavaScript函数，在单击特定图像时显示弹出窗口;但是，弹出窗口和封面（弹出窗口后面的透明灰色封面，当单击时弹出窗口消失）将不会移动到当前窗口的中心。由于可以在任何可见的地方单击图像，弹出窗口需要在当前位置（单击图像时）的页面中心（具有动态高度和静态宽度）打开。我还需要它来处理多显示器设置。我找到了这个JavaScript

function PopupCenter(url, title, w, h) {  
    // Fixes dual-screen position                         Most browsers      Firefox  
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;  
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;  

    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;  
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;  

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;  
    var top = ((height / 2) - (h / 2)) + dualScreenTop;  
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);  

    // Puts focus on the newWindow  
    if (window.focus) {  
        newWindow.focus();  
    }  
}

但我对JavaScript很新，我不确定如何实现这样的东西。如果有使用HTML和CSS的修复，那么我更喜欢这个，但我可以遵循的简单JavaScript修复很好。谢谢，如果你能提供帮助。

我的代码在这里：http://jsbin.com/EMAHetA/4/edit

Answer 1

我认为您在此处尝试创建的内容通常称为模式，并且可以在pure CSS中删除一个。你也可以在jQuery中实现一个模态：做一些搜索“jquery模态”并看看你得到了什么。我推荐Foundation Reveal（如果你不介意包括其他一些有用的js）或Kyle Fox's modal code（超轻量级）。

Answer 2

如果你不想使用javascript或任何外部模态库而是想使用 pure css ，你可以将以下css代码添加到你的div元素

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

小提琴：http://jsfiddle.net/mBBJM/1/

Answer 3

使用您提供的PopupCenter代码，您可以执行以下操作。

在 HTML 中（我在数据属性中使用 JSON 以简化）。类将用于查找节点。

<span
    class="popup"
    data-popup='{"s": "http://google.com", "t": "Google", "h": 400, "w": 400}'
>Click me!</span>

在 JavaScript

中

window.addEventListener('load', function () { // wait for nodes to exist
    var popups = document.getElementsByClassName('popup'), // get all the popups
        i = popups.length; // for iterating
    function clickPopupNode() { // function describing actions to take
        var obj = JSON.parse(this.getAttribute('data-popup'));
        PopupCenter(obj.s, obj.t, obj.h, obj.w);
    }
    while (i-->0) { // iterate over each matching node
        popups[i].addEventListener('click', clickPopupNode); // and attach func
    }
});

Demo

除了PopupCenter代码功能似乎不能按预期工作;试试这个简化版本

function PopupCenter(s, t, h, w) {
    var y = (window.screen.height - (h | 0)) / 2,
        x = (window.screen.width - (w | 0)) / 2;
    window.open(
        s, t,
        'scrollbars=yes, width='+w+', height='+h+', top='+y+', left='+x
    ).focus();
}

Demo 2

Answer 4

我宁愿不再回答我自己的问题，但我已经想出了如何做到这一点，而且这种方法不在任何答案中。无论如何，这个想法实际上相当简单。首先确定弹出窗口的尺寸，在我的例子中是1280px x 720px。然后给出弹出这个css（在上下文中）：

position:fixed;
top:50%;
left:50%;
margin:-360px 0 0 -640px;

这样做是设置弹出窗口左上角在屏幕中心的位置，然后将弹出窗口的左侧和顶部尺寸设置为其自身尺寸的一半，有效地移动弹出窗口的中心到屏幕的中心。要自己使用此方法，您需要做的就是相应地调整各种尺寸。

当前窗口中的中心弹出窗口

4 个答案: