Как автоматически изменить размер всплывающего окна или модального диалога для изменения содержимого - PullRequest
Новая
       8

Как автоматически изменить размер всплывающего окна или модального диалога для изменения содержимого

1 голос
/ 08 октября 2009

У меня есть iframe, который может появиться в модальном диалоговом окне jQuery, всплывающем окне или просто как часть страницы. Высота содержимого этого iframe может изменяться при появлении и исчезновении элементов, и мне нужно, чтобы содержащий iframe вместе с модальным диалоговым окном или всплывающим окном, где это применимо, изменил height , если необходимо, чтобы он был "правильным 'для размера контента.

Какой лучший способ сделать это? Вы можете увидеть страницу, где мне нужно это поведение здесь .

Предпочтительно, чтобы было какое-то событие, которое сработало бы автоматически, если какой-либо контент изменился, поэтому мне не нужно запускать какой-либо метод везде, где я заставляю элементы появляться или исчезать.

Спасибо.

1 Ответ

2 голосов
/ 08 октября 2009

Я думаю, вам нужно сделать что-то вроде 

/* 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 */

Извините, не проверял на себе, но (я чувствую) это сработает. Надеюсь, это поможет.

...