Question

我正在使用SimpleModal Jquery插件，效果很好！

但是，有时需要更改模态div的宽度和高度，因此我需要模态自动将其自身重新定位在页面的中心。我发现SimpleModal使用它的setPosition（）函数来做到这一点。启动模态时会自动调用它。

所以我试图在模态div的尺寸改变时调用所述函数，但是它不起作用：

$('#mybutton').click(function() {
    //code here to resize the modal
    $.modal.impl.setPosition(); //doesn't work. note that at this point, the modal is still active (displayed)
});

你有什么想法吗？

Answer 1

在当前版本（1.3.5）中，您可以在回调中重新定位对话框。例如：

$('#foo').modal({
    onShow: function (dialog) {
        var modal = this; // you now have access to the SimpleModal object

        // do stuff here

        // re-position
        modal.setPosition();
    }
});

我正在开发1.3.6版本，它将为这些“实用程序”功能提供一些便利方法。

Answer 2

当你将一个元素（我们称之为theElement）变成一个模态时，它将被div#simplemodal-container包裹。 div#simplemodal-container将获得与theElement相同的维度（事实上，它将比theElement高2px /更宽

你没有说你实际调整大小的元素，但我猜它是theElement。如果是这种情况，#simplemodal-container的维度不会更新，再次定位将无效。您必须明确调整容器大小。

因此，在调整大小之后再次定位之前，请执行以下操作：

$("#simplemodal-container").css({height: newHeight, width: newWidth});

此处我假设newHeight和newWidth是theElement的新维度（如果您想遵循simplemodal的政策，则为+2）

Answer 3

这对我有用：

var modal = $.modal("<div>...</div>");


$('#mybutton').click(function() {
    //code here to resize the modal
    modal.setPosition();
});

调整模态div时，自动将Jquery SimpleModal重新定位到页面中心

3 个答案: