触发 simplemodal / 动态模态高度的 onresize 事件答案

【问题标题】：Trigger onresize event for simplemodal / dynamic modal height触发 simplemodal / 动态模态高度的 onresize 事件
【发布时间】：2010-03-23 20:33:22
【问题描述】：

有没有一种方法可以在 javascript/jQuery 中为我的窗口触发 onresize() 事件？

我试过了：

$(window).resize();

但这似乎并没有完全按预期工作。 simplemodal jQuery 插件为您提供autoPosition 模态窗口的选项。有时在 IE 中，模态显示有点偏离中心，但只要我手动更改窗口大小，它就会完美居中。所以我只想触发 onresize 事件，这样它就会自动将simplemodal的autoPosition居中设置为true。

好的，我认为我的部分问题是我试图使模态的高度动态化，如果内容会通过显示或隐藏元素在模态中发生变化，那么大小也会相应地发生变化。

这是我的模态调用：

$(selector).modal({
    //autoPosition: true,
    //autoResize: true,
    onShow: function(dlg) {
        $(dlg.container).css('height', 'auto') // dynamic height based on content
    },
    onOpen: function(dialog) {
        dialog.overlay.fadeIn('slow', function() {
            dialog.data.hide();
            dialog.container.fadeIn('slow', function() {
                dialog.data.slideDown('slow');
            });
        });
    },
    onClose: function(dialog) {
        dialog.data.fadeOut('slow', function() {
            dialog.container.hide('slow', function() {
                dialog.overlay.slideUp('slow', function() {
                    $.modal.close();
                });
            });
        });
    }
});

如果我注释掉 onShow 属性，一切都会重新开始。所以我想这可能是问题的一部分。有没有办法根据内容动态调整模式的大小，不会产生这个问题？

使用simplemodal-1.3.4

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您的方法应该有效，但可能不会触发您想要的简单模式事件，例如：

$(window).resize(function() {
  alert("resized");
});
$(window).resize(); //alerts "resized"

针对您的特定问题的解决方案可能是：

$(window).trigger('resize.simplemodal');

【讨论】：

我实际上在 Firefox 3.6 和 IE8 中都看到了这一点。有时模态框的下半部分会被切断，直到我手动调整大小，然后它会完美居中。
@Nick Craver，在那里查看我更新的问题，我想我找到了问题的一部分......也许你可以对更新部分有更多的了解。
@Nick Craver，不利的是，如果我有一个可以切换显示和隐藏元素的下拉框。高度会增长/缩小。所以我希望模态遵循这一点。如果我将其注释掉，并且高度需要增加，则元素会溢出模态框，反之亦然，如果我们删除元素，就会有很多剩余空间。所做的只是根据切换元素的可见性使模态的高度动态化，这些元素存在于模态空间内。
@gmcalab - 您是在使用其中的许多，还是只在页面上使用 1 个？如果你像这样在 onShow 中存储一个引用：var mod = dlg，你应该可以稍后调用mod.setPosition();，我看不出有任何方法可以获取 Eric 正常公开的对话框对象。
是的，这似乎不起作用。我可以在 1.3 版中使用onShow: function(dlg) { $(dlg.container).css('height', 'auto') // dynamic height based on content }，但是当我使用 1.3.4 时，它会产生这个问题...

【解决方案2】：

据我所知，你应该使用

$(window).resize(function() {
  // your code
});

它不适合你吗？你到底期待什么？

【讨论】：