Nyromodal 固定位置窗口答案

【问题标题】：Nyromodal fixed position windowNyromodal 固定位置窗口
【发布时间】：2011-10-19 11:39:56
【问题描述】：

我正在使用 nyromodal，并且无法为弹出窗口提供相对于背景的固定位置。 IE。我已经将它定位在我想要它去的地方，但是当浏览器窗口调整大小时，弹出窗口会相对于背景页面内容发生变化。我知道这是 nyromodal 的一个功能，但我很想将其关闭。我在文档中找不到执行此操作的功能。有人有什么想法吗？

CSS sn-p:

.nyroModalCont {
    position: absolute;
    margin:20px 25px 25px 25px;
    background:#000;
}

触发器：

echo '<a href="showimage.php?id='.$row['id'].'" class="trigger" rel="gal">';
echo '<img src="'.$this->ImageDir.$row['id'].'/thumb/'.$row['thumb'].'" border="0" />';
echo '</a>';

谢谢，人力资源

【问题讨论】：

您不需要调整大小吗？你能更好地描述你需要的行为吗？你有什么类型的模态窗口：一个 iframe 还是一个 div？
我在上面的原始问题中添加了一些代码。基本上我希望弹出窗口总是出现在某个点以下 20px 处。它做得很好。但是当我调整浏览器窗口的大小时，Nyromodal 会移动弹出窗口——这意味着弹出窗口的顶部边缘相对于它后面的页面会改变位置。我希望它与它后面的页面保持在同一个位置。希望这是有道理的！人力资源

标签： jquery position fixed nyromodal

【解决方案1】：

为避免在调整浏览器窗口大小后移动（和调整大小）弹出窗口，您可以将 resize 函数（内部没有代码）覆盖到 nyroModal 选项中：

$('.trigger').nyroModal({
  resize: function(recalc) {},
});

作为替代（或添加），根据您的需要，您可以使用处理调整大小的 nyroModal 回调来更改 css 属性：

$('.trigger').nyroModal({
  callbacks: {
    beforeResize: function(nm) {
    },
    afterResize: function(nm) {
    }
  }
});

【讨论】：

非常感谢 Macgyver，它运行良好，完全符合我的要求。不幸的是，我现在意识到我问错了！现在，当调整窗口大小时，弹出窗口根本不会移动，这就是我所要求的。我应该强调的是，我希望它与下面的东西保持相同的位置——所以当例如您调整浏览器大小并移动右边缘（以便网站在您移动时移动）我希望弹出窗口完全按照。这可能是不可能的。感谢您的帮助！
不客气。 NyroModal 在不考虑模态窗口下的内容的情况下执行自己的工作，因此我想您必须重写 resize 函数才能实现此行为，这不是一项简单的任务。
如果我希望窗口始终位于浏览器顶部 20 像素处，该怎么办？如果在评论中提出另一个问题是不好的形式，我深表歉意，如有必要，我可以将其作为单独的问题重新发布。
你需要的都是可能的，但是不重写resize函数是不可能有好的动画的。我的意思是你可以在 beforeShowCont 回调和 afterResize 回调中放入代码 $('.nyroModalCont').css('top', '20px') 来固定弹出窗口的位置，但在每次调整弹出窗口的大小之后窗口将在距离顶部 20px 处停止之前向上或向下移动。