如何自动调整弹出窗口或模式对话框的大小以更改内容

Question

我有一个 iframe，它可以出现在 jQuery 模态对话框、弹出窗口中或作为页面的一部分出现。 这个 iframe 的内容的高度可以随着元素的出现和消失而改变，我需要包含 iframe，以及适用的模式对话框或弹出窗口，根据需要更改高度，使其“恰到好处”的大小内容。

实现这一目标的最佳方法是什么？ 你可以看到页面，我需要这种行为在这里。

如果任何内容发生变化，最好有一些事件会自动触发，这样我就不必在任何地方运行某些方法来使元素出现或消失。

谢谢。

Answer 1

我认为你需要做类似的事情

/* creating jQuery special event to catch DOM content change */
var changeInterval;

jQuery.fn.contentchange = function(fn) {
    return this.bind('contentchange', fn);
};

jQuery.event.special.contentchange = {
    setup: function(data, namespaces) {
        var self = this,
            $this = $(this),
            $originalContent = $this.html();
        changeInterval = setInterval(function(){
            if($originalContent != $this.html()) {
                    $originalContent = $this.html();
                    jQuery.event.special.contentchange.handler.call(self);
            }
        },500);
    },
    teardown: function(namespaces){
        clearInterval(changeInterval);
    },
    handler: function(event) {
        jQuery.event.handle.call(this, {type:'contentchange'})
    }
};
/* end */

/* assigning our special event handler to iframe */ 
var iframe = $('iframe[src="login.htm"]')[0],
    iDoc = iframe.contentWindow || iframe.contentDocument; // we love IE
if (iDoc.document && iDoc.document.body) {
    $(iDoc.document.body).bind('contentchange', function(){
        var currentHeight = $(this).outerHeight();
        // we need to change iframe height as well as dialogs height
        iframe.height = currentHeight;
        $('#loginDialog').height(currentHeight);
    })
}    
/* end */

抱歉，还没有为自己测试过，但是（我觉得）它会起作用。 希望能帮助到你。