jQuery UI Модальное Диалоговое окно только центрировался на ВТОРОЙ загрузке (содержание из внешнего файла)?
Файл, который я загружаю в модальное диалоговое окно, может варьироваться по высоте. Когда первая ссылка открыта, вершина диалогового окна центрируется горизонтально (значение, что диалоговое окно расположено слишком низко). После того, как я закрою это и вновь откроюсь снова, или с той же кнопкой редактирования или с другой, расположение лучше.
Кажется, что это всегда - один шаг позади: первая загрузка это не может сказать то, что ширина/высота имеет загружаемый файл, затем на последующей загрузке того же файла, это расположено отлично.
Я использую следующий код как модальное редактирование для таблицы данных:
$(".editMe").button({
icons: {
primary: 'ui-icon-document'
},
text: false
}).click(function () {
var eventLink = $(this).attr("name");
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
open: function () {
//The height of the file below can vary, and in the
//JS Bin environment the dialog loads just fine blank
$("#modify").load("themes_edit.asp?id=" + eventLink);
},
close: function () {
oTable.fnDraw();
}
};
$("#modify").dialog(dialogOpts).dialog("open");
return false;
});
И вот некоторый демонстрационный HTML (хотя файл, загруженный в #modify, не жив). Я также настроил это в Мусорном ведре JS.
2 ответа
Отставание "на шаг" будет потому, что в событии открытия диалога вы пытаетесь загрузить данные. Поэтому, когда диалог откроется, он покажет старое содержимое, а затем внезапно появится новое содержимое.
Один из способов решения этой проблемы - открыть диалог, но сначала очистить существующее содержимое и показать загрузочный gif, пока вы ждете ответа от ajax-вызова с данными, которые затем загружаются в диалог.
N.B Если вас беспокоит рывок экрана при изменении размеров диалога, вы можете поместить ответ ajax в div, расположенный за пределами экрана, затем получить размеры, а затем красиво анимировать изменение размеров диалога при затухании нового содержимого.
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
close: function () {
oTable.fnDraw();
}
};
var $editDialog = $('#modify').dialog(dialogOpts);
$(".editMe").button({
icons: {
primary: 'ui-icon-document'
},
text: false
}).click(function () {
var eventLink = $(this).attr("name");
//clear existing dialog content and show an ajax loader
$editDialog.html('<div class="loading" />');
//show the dialog
$editDialog.dialog("open");
//get dynamic content and load it into the dialog and resize
$.get("themes_edit.asp?id=" + eventLink, function(response){
//fade out ajax loader
$editDialog.find('div.loading').fadeOut(500, function(){
$editDialog.html( response )
.dialog('option', 'position', 'center');
});
});
return false;
});
Вы можете инициировать повторное центрирование после загрузки содержимого (чтобы вы знали размер), например:
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
open: function () {
$("#modify").load("themes_edit.asp?id=" + eventLink, function() {
$(this).dialog('option', 'position', 'center');
});
},
close: function () {
oTable.fnDraw();
}
};
Здесь просто используется обратный вызов для .load () и устанавливает позицию опцию , которая запускает повторное центрирование в соответствующее время ... то есть, как только вы узнаете правильный размер.
В качестве примечания, поскольку вы создаете, а затем открываете диалоговое окно, вы можете удалить как свойство autoOpen: false, , так и .dialog ("open") , по умолчанию открывается немедленно :)