jquery.simplemodal-1.3.3.js ：绝对定位（与固定）

Question

我正在使用 Eric Martin 的甜蜜“simplemodal”jQuery 插件。它工作得非常好，并且会推荐给任何正在寻找基于 jQuery 的轻量级模态对话解决方案的人。

也就是说，我有一些特别长的内容“需要”显示为模式。默认情况下，容器元素使用“overflow:auto”来处理太长而无法容纳在浏览器窗口中的内容。这在大多数情况下效果很好，但在这种情况下，我希望对话保持全高并与页面的其余部分一起滚动（定位“绝对”与“固定”）。我可以通过将源中的任何 position: 'fixed' 引用修改为 position: 'absolute' 来相当轻松地完成此工作，但这很糟糕，因为这意味着我的所有模态都会显示这样...

有人对如何优雅地完成这项工作有任何想法吗？

Answer 1

尝试将position:absolute添加到特定div区域的实际模态调用中，

如下所示

$("#somebutton").click(function() {

    $('#my-modal-content').modal({
        position:absolute
    });
});

我遇到了与您相同的问题，但我想要为不同的按钮使用不同大小的框/功能，这就是我解决它的方法。

Answer 2

这就是我所做的：

jQuery('#MyModal').modal({
    //options
});
jQuery('#MyModal').parents('.simplemodal-container').css('position', 'absolute');

Answer 3

听起来您并不反对根据您的特定需求调整源...因此我建议重新设计它，以便您可以通过选项对象提供定位和溢出属性。

Answer 4

只需在对话框本身中有一个滚动条即可。

Answer 5

您必须大幅更改代码，尤其是处理 IE 的代码（主要是 IE6）。

仅更改为绝对位置最初适用于某些浏览器，但某些浏览器或页面调整大小（在任何浏览器中）将恢复到固定位置。