Я использую плагин SimpleModal для отображения динамического содержимого в плавающем окне. В этом плавающем окне был включен вызов функции Javascript (в событии клика), который меняет некоторый контент в этом плавающем окне.Содержимое в плавающем окне с использованием jQuery Плагин SimpleModal не может быть заменен после двойного открытия в IE8
Это очень хорошо работает с FF. Но есть проблема с IE (я тестировал только с IE8): Только в первый раз это модальное окно было открыто на соответствующей странице, изменив любой контент (или любой другой эффект, такой как скрытие DIV и т. Д.) Изнутри этого Работает Javascript с помощью jQuery. При последующих вызовах, если это плавающее окно было закрыто между ними, IE просто ничего не сделает !!!
Похоже, что IE больше не признает, что некоторые объекты DOM были изменены и что эти изменения должны быть визуализированы. При проверке фактического содержимого объекта DOM вы увидите, что содержимое было изменено, но оно просто не отображается! :-(
Я уже пробовал некоторые хаки, как addClass ('подделка')/removeClass ('фальшивый') на корневой элемент, но не удалось.
Вот некоторые тестового кода.
функция для открытия Java-модальное окно:
showTestModal('DEBUG', '<div id="DivTestRoot"><div id="DivTest">OrigValue</div><a href="javascript:changeContent(\'\',\'\');"">Click here</a></div>', 100, true, 50, 50);
функция Java-изменения содержания (вызывается из плавающего окна):
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 был адаптирован, bu t показывается значение «OrigValue». В первой попытке он всегда работает так, как должен («ChangedValue» показан в DIV).
Благодарим за любые намеки!
Приветствия, Roger
Hi Roger. Я пробовал прочитать вопрос, но я немного потерялся. Не могли бы вы попытаться изменить это для ясности? Прямо сейчас мой единственный совет: возможно, попробовать использовать официальный jQuery-плагин ui, стоит попробовать. – btelles