0

我正在使用 SimpleModal 插件在浮动窗口中显示动态内容。在这个浮动窗口中包含了一个 Javascript 函数调用（在点击事件上），它正在改变这个浮动窗口上的一些内容。

这对 FF 非常有效。但是 IE 有一个问题（我只用 IE8 测试过）：仅在第一次在相应页面上打开此模式窗口时，更改此 Javascript 中的任何内容（或任何其他效果，如隐藏 DIV 等）使用 jQuery 的函数正在工作。在随后的调用中，如果此浮动窗口已在其间关闭，则 IE 将什么也不做！！！

似乎 IE 不再识别某些 DOM 对象已更改并且应该呈现这些更改。检查 DOM 对象的实际内容时，您会看到内容已更改，但只是没有渲染！:-(

我已经尝试了一些技巧，例如根元素上的 addClass('fake') / removeClass('fake') ，但没有成功。

这里有一些测试代码。

用于打开模态窗口的 Javascript 函数：

showTestModal('DEBUG', '<div id="DivTestRoot"><div id="DivTest">OrigValue</div><a href="javascript:changeContent(\'\',\'\');"">Click here</a></div>', 100, true, 50, 50);

更改内容的 Javascript 函数（从浮动窗口中调用）：

function changeContent() {
    $('#DivTest').html('ChangedValue');
    $('#DivTestRoot').addClass('fake');
    $('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot').show();
    alert($('#DivTest').parent()[0].innerHTML);

}

调用 jQuery SimpleModal 插件的对应代码：

function showTestModal(title, data, height, showClose, top, left) {
if (title == undefined)
    title = "";
if (data == undefined)
    data = "";
if (height != undefined)
    TestModal.height = height;
if (top == undefined)
    top = 135;
if (left == undefined)
    left = 20;
var closeHTML = "";
if (showClose == undefined || showClose == true)
    closeHTML = "<a href='#' title='Close' class='modalCloseX'>x</a>";
var htmlModal = "<div id='DivTestModal' style='display:none'><div class='TestModal-top'></div><div class='TestModal-content'><h1 class='TestModal-title'>"
    + title + "</h1><div class='TestModal-loading' style='display:none'></div><div class='TestModal-errormessage' style='display:none'></div>"
    + "<div class='TestModal-message'>" + data + "</div></div><div class='TestModal-bottom'></div></div>";
$(htmlModal).modal({
    closeHTML: closeHTML,
    position: [top, left],
    overlayId: 'TestModal-overlay',
    containerId: 'TestModal-container',
    onOpen: TestModal.open,
    onShow: TestModal.show,
    onClose: TestModal.close
});

}

这或多或少是从http://www.ericmmartin.com/projects/simplemodal复制的代码：

var TestModal = {
message: null,
height: 0,
open: function(dialog) {
    //$(this).parent().appendTo("form");
    $(dialog).parent().appendTo("form");
    // add padding to the buttons in firefox/mozilla
    if ($.browser.mozilla) {
        $('#TestModal-container .TestModal-button').css({
            'padding-bottom': '2px'
        });
    }
    // input field font size
    if ($.browser.safari) {
        $('#TestModal-container .TestModal-input').css({
            'font-size': '.9em'
        });
    }
    var h = 280;
    if (TestModal.height > 0)
        h = TestModal.height;

    var title = $('#TestModal-container .TestModal-title').html();
    $('#TestModal-container .TestModal-title').html('Laden...');
    dialog.overlay.fadeIn(200, function() {
        dialog.container.fadeIn(200, function() {
            dialog.data.fadeIn(200, function() {
                $('#TestModal-container .TestModal-content').animate({
                    height: h
                }, function() {
                    $('#TestModal-container .TestModal-title').html(title);
                    $('#TestModal-container form').fadeIn(200, function() {
                        $('#TestModal-container #TestModal-name').focus();

                        // fix png's for IE 6
                        if ($.browser.msie && $.browser.version < 7) {
                            $('#TestModal-container .TestModal-button').each(function() {
                                if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
                                    var src = RegExp.$1;
                                    $(this).css({
                                        backgroundImage: 'none',
                                        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
                                    });
                                }
                            });
                        }
                    });
                });
            });
        });
    });
},
show: function(dialog) {
    $('#TestModal-container .TestModal-close').click(function(e) {
        e.preventDefault();
        if ($('#TestModal-container .TestModal-errormessage:visible').length > 0) {
            var msg = $('#TestModal-container .TestModal-errormessage div');
            msg.fadeOut(200, function() {
                msg.empty();
                contact.showError();
                msg.fadeIn(200);
            });
        }
        else {
            $('#TestModal-container .TestModal-errormessage').animate({
                height: '30px'
            }, contact.showError);
        }
    });
},
close: function(dialog) {
    $('#TestModal-container .TestModal-errormessage').fadeOut();
    $('#TestModal-container .TestModal-title').html('Schliessen...');
    $('#TestModal-container form').fadeOut(200);
    $('#TestModal-container .TestModal-content').animate({
        height: 40
    }, function() {
        dialog.data.fadeOut(200, function() {
            dialog.container.fadeOut(200, function() {
                dialog.overlay.fadeOut(200, function() {
                    $.modal.close();
                });
            });
        });
    });
},
error: function(xhr) {
    alert(xhr.statusText);
},
showError: function() {
    $('#TestModal-container .TestModal-errormessage')
   .html($('<div class="TestModal-error">').append(contact.message))
   .fadeIn(200);
}
};

当浮动窗口第二次打开时，您会在警告框中看到 innerHTML 已被调整，但仍显示值“OrigValue”。在第一次尝试中，它始终按应有的方式工作（“ChangedValue”显示在 DIV 中）。

谢谢你的任何提示！

干杯，罗杰

4

3 回答 3

0

对不起我的措辞 - 昨天来晚了！;-)

简短的，希望更清楚的问题描述：

从 SimpleModal 窗口中调用 Javascript 函数。在此函数中，此模式窗口中的某些内容被替换 - 例如 $('#DivTest').html('ChangedValue')。

在 IE8 中，如果 SimpleModal 窗口关闭并再次打开，则无法再更改此 modal 窗口内的任何内容或将元素设置为不可见等。您可以看到 DOM 对象的内容和属性已更改，例如通过使用警报功能，但不会呈现这些更改。

FF 不会出现此问题。

干杯，罗杰

于 2009-11-09T08:32:07.867 回答
0

罗杰，

尝试将您的功能更改为：

function changeContent() {
    var container = $('#TestModal-container')[0];
    $('#DivTest', container).html('ChangedValue');
    //$('#DivTestRoot').addClass('fake'); // ? why add class then removeClass?
    //$('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot', container).show();
    alert($('#DivTest', container).parent()[0].innerHTML);
}

我认为问题在于您绑定和访问内容的方式。如果这没有帮助，请告诉我。

-埃里克

于 2009-11-11T14:21:05.220 回答
0

我发现 IE8 在关闭模式窗口后似乎没有正确删除 DOM 对象。

您可以在调试 Javascript 时看到，在打开另一个模式窗口后，对象的旧值仍然存在，但会呈现不同的内容！在这种情况下，IE8“决定”对这些对象不做任何事情。

关闭模态窗口时调用 SimpleModal jQuery 插件的 $.modal.close() 函数。在 FF 中，所有 DOM 对象似乎都已从内存中正确删除，但在 IE8 中却没有。

在这些发现之后，我决定实施一种不同的方法 - 模式窗口和标准 aspx 页面中的 iFrame。效果很好。

干杯，罗杰

于 2009-11-12T20:32:03.593 回答