javascript - 如何使用 nyromodal 将元素浮动到模态容器之外

Question

我经常使用漂浮在容器边界之外的元素和图像——它增加了尺寸，有助于间距并增加了一些风格。

在本例中，我使用 NyroModal v2 将 html（包含各种其他元素的 div 标签）加载到模式窗口中。我曾计划一个图像元素（在模态中）将浮动在 nyromodal 边界之外一点，但模态对话框正在裁剪超出模态边界的元素，尽管位置是绝对的或相对的，也不管 z-index 非常高.

寻找建议...谢谢

Answer 1

好的，使用 chrome 调试器进行更多挖掘：nyromodal 容器在 _reposition 函数中添加了一个计算样式：

this.elts.cont.css('overflow', 'auto');

我将其注释掉并且我的元素浮动到边界之外，但如果您的模态内容需要滚动，这不是一个解决方案 - 它需要适合屏幕，否则您可能会得到不可预测和不满意的结果。

当您关闭模态时，还有另一个函数 (hideCont) 将 nyromodal 容器溢出设置为隐藏：

nm.elts.cont.css('overflow', 'hidden').fadeOut(clb);

我将 'hidden' 更改为 '' 并且我有所需的行为。

NyroModal 在 github 上，也许添加此功能（不破坏滚动内容）的 fork 会很有用 - 我没有时间，所以上面是我的解决方案 - 在这种情况下它适用于我，希望可能是一个令人满意的快速 -替别人修。