jQuery/Css: 弹出内容层会将页面向下推

Question

我正在使用一个名为Reveal的jQuery插件。当您单击具有特定类的链接时，它会像弹出窗口一样显示一个div。

在我的网站上，我正在使用它来显示评论。问题是当div的内容很多时，打开的div会推动页面底部。

请问是否有jQuery或CSS的方法可以在评论框关闭后消除不必要的空间？

编辑1：这是关闭动画代码：

modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                        modal.animate({
                            "top":  $(document).scrollTop()-topOffset + 'px',
                            "opacity" : 0
                        }, options.animationspeed/2, function() {
                            modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                            unlockModal();
                        });

编辑2：如果我使用滚动，就会出现以下情况：

正常：http://jsfiddle.net/K4E3g/1/

滚动：http://jsfiddle.net/K4E3g/2/

- xperator

---

你能否通过添加CSS溢出规则使评论可滚动？或者，这不是期望的设计吗？ - El Guapo

当隐藏时，该框是否被设置为display:none，并且该框是否绝对定位？ - ctdeveloper

@ElGuapo 我没有足够的空间，而且那样会搞乱设计。 - xperator

Answer 1

编辑

该插件在其代码中广泛使用visibility: hidden / visible来显示和隐藏模态框。这意味着任何关闭状态的模态框都被设置为visibility: hidden，这会导致如果模态框比页面大，则页面会变长，因为具有visibility: hidden的元素仍然占据页面空间。

你可以尝试在插件本身中将所有的visiblity: hidden更改为display: none，并将visibility: visible更改为display: block，看看是否能得到所需的结果，但我没有测试过，可能会出现不良影响。

或者，我建议您考虑使用其他模态框插件，如Eric Martin的优秀的Simple Modal插件。

希望这能帮到您！

- dSquared

---

如果这是正确的方法，您可以通过将高度动画化为0来平滑处理过程，然后再删除评论div。 - Timbadu

和之前一样，不需要的空格仍然存在。 - xperator

@xperator你可以贴一下你的HTML代码片段吗？ - dSquared

@dSquared 你所说的“snippet”是什么意思？（对不起我的英语） - xperator

@xperator的答案已更新；不幸的是，我认为如果不对插件进行大量编辑，您将继续遇到这个问题。 - dSquared

@dSquared 非常感谢。我将每个 visibility 更改为 display，不需要的空格就不再显示了！ - xperator

Answer 2

您需要使用CSS来定位创建的模态框div，并为其设置max-height和max-width值，以及overflow:scroll属性。

类似以下代码应该可以实现：

div.comments-modal {
  max-width:60%;
  max-height:80%;
  overflow:auto;
}

注意：使用％值而不是px值将允许您的模态框尺寸随用户的浏览器/屏幕大小调整。如果您想要防止这种情况，那么只需使用定义为px的值即可。

- Joel Glovier

---

就像我告诉ElGuapo的那样，这会破坏模态div的设计。 - xperator

请检查已编辑的问题，您现在可以看到滚动是如何工作的。 - xperator

如果您想避免文本被截断，只需添加一个额外的包装器并稍微更改位置，就像这样：http://jsfiddle.net/K4E3g/4/ - Joel Glovier

Answer 3

尝试设置max-height和overflow: auto。

    #myModal {
        max-height: 300px;
        overflow: auto;
    }

    <div id="myModal" class="reveal-modal">
         <h1>Modal Title</h1>
         <p>Any content could go in here.</p>
         <a class="close-reveal-modal">&#215;</a>
    </div>

或者，你可以尝试一下

modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                        modal.animate({
                            "top":  $(document).scrollTop()-topOffset + 'px',
                            "opacity" : 0
                        }, options.animationspeed/2, function() {
                            modal.css({'top':topMeasure, 'opacity' : 1, 'display' : 'none'});
                            unlockModal();
                        });

你也可以尝试使用淡入动画，它将使div的高度从0到100%进行动画处理，然后在淡出时向上滚动。

编辑：请查看this fiddle以获取仅使用jQuery的示例。

- saluce

---

如何向上滚动？这就是我想做的，我想让不需要的空间消失并向上滚动到页面。 - xperator

@xperator，请检查编辑和http://jsfiddle.net/BkZ6k/。只需记住设置浏览器大小，以便您可以看到设置`display: none与visibility: hidden`的效果。 - saluce