3

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

在我的网站上，我使用它来显示评论。问题是当 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/

4

3 回答 3

3

已编辑

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

您可以尝试在插件本身中更改所有visiblity: hiddentodisplay: none和visibility: visibletodisplay: block并查看是否可以获得所需的结果，但是我没有对此进行测试，并且可能会有不良的副作用。

或者，我建议查看不同的模态插件，例如 Eric Martin 出色的Simple Modal插件。

我希望这有帮助！

于 2012-05-31T20:09:46.677 回答
1

您需要使用 CSS 定位创建的模态 div，并为其指定一个最大高度值和一个最大宽度值，以及溢出：滚动。

像这样的东西应该工作：

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

注意：使用 % 值而不是 px 值将允许您的模态尺寸随用户的浏览器/屏幕大小进行调整。如果你想防止这种情况发生，那么只需使用 px 定义的值来代替。

于 2012-05-31T20:13:23.203 回答
0

尝试设置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的示例。

于 2012-05-31T20:10:38.523 回答