弹出窗口的定位答案

【问题标题】：Positioning of a pop up弹出窗口的定位
【发布时间】：2011-09-23 14:33:45
【问题描述】：

如果您将浏览器窗口放大，则所有 div 都会水平更改位置。有没有办法防止这种情况发生？非常感谢任何帮助。

谢谢

【问题讨论】：

标签： jquery html popup window position

【解决方案1】：

我看到你在页面上使用 jQuery，你为什么不试试 jQuery UI 位置实用程序：

http://jqueryui.com/demos/position/

这允许您相对于另一个元素定位任何元素。

【讨论】：

您必须在包含 jQuery 之后包含 jQuery UI 脚本：<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
这里是你的代码在 js fiddle 中的实现：jsfiddle.net/swatkins/bpHS3——另外，你没有使用 HTML5 DTD，所以你需要添加 type="text/javascript" 和 type="text/css" 到你的 js 和样式标签。
您还可以从此页面创建更精简的下载：jqueryui.com/download

【解决方案2】：

setPositionPopUp: function ($posObj, $dlg, topOff, leftOff) {
            var dl = $dlg.get(0);
            if ($dlg.length == 0) {
                return;
            }

            if (topOff == null)
                topOff = 20;
            if (leftOff == null)
                leftOff = 20;

            var v = $posObj.offset();
            dl.style.position = "absolute";
            dl.style.top = (v.top + topOff) + 'px';
            dl.style.left = (v.left + leftOff) + 'px';
            dl.style.zIndex = "10000";
            $dlg.fadeIn("slow");
        }

我已经使用上面的代码来实现你想要的。如果您不想包含整个 jquery ui 文件。

你可以这样称呼它：

setPositionPopup($('.colors_box'), $('img'));

显然要正确选择你的选择器。

【讨论】：