Question

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

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

enter image description here

是否有一种jQuery或Css方法可以在注释div关闭后消除不需要的空间？

编辑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/

Answer 1

<强>被修改

该插件使用visibility: hidden / visible在其代码中广泛显示和隐藏模态。这意味着处于关闭状态的任何模态都设置为visibility: hidden，其效果是，如果模态大于页面，使页面长于应有的值，则为visibility: hidden的元素仍占用页面上的空间。

您可以尝试将插件本身中的所有visiblity: hidden更改为display: none，将visibility: visible更改为display: block，看看是否能获得所需的结果，不过我有未经测试，可能存在不良副作用。

或者，我建议查看一个不同的模态插件，例如Eric Martin的优秀Simple Modal插件。

我希望这有帮助！

Answer 2

您需要使用CSS定位创建的模态div，并为其指定max-height值和max-width值，以及overflow：scroll。

这样的事情应该有效：

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

注意：使用％值而不是px值将允许您的模态尺寸根据用户的浏览器/屏幕大小进行调整。如果你想阻止它，那么只需使用px定义的值。

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％的动画，然后在不透明度淡化时向上滚动。

编辑：仅使用jQuery检查this fiddle示例。

jQuery / Css：弹出内容Div将页面向下推

3 个答案: