0

Делаю на JS модальные окошки (jQuery и плагины не предлагать сразу). для модального окна задан следующий CSS:

left: 50%;
top: 50%;

При помощи JS я добавляю нужный текст через innerHTML, после определяю размеры модального окна через (offsetWidth, offsetHeight) и делаю отрицательный margin-top, margin-left

win.style.marginTop = (-win.offsetHeight / 2) + 'px';
win.style.marginLeft = (-win.offsetWidth / 2) + 'px';

Когда текст, то все замечательно, но если вдруг я хочу отобразить некэшированную картинку, то offsetWidth и offsetHeight возвращают неверные данные (хотя в консоли хрома я вижу нужные мне размеры этих свойств). Как исправить такое?

Всем спасибо

1 ответ 1

0

Решил свою проблему следующим образом:

var images = win.getElementsByTagName('img');
if (images) {
    var img = images[0];
    win.style.visibility = 'hidden';
    img.onload = function() {
        win.removeAttribute('style');
        win.style.marginLeft = (-win.offsetWidth / 2) + 'px';
        win.style.marginTop = (-win.offsetHeight / 2) + 'px';
    }
}
win.removeAttribute('style');
win.style.marginTop = (-win.offsetHeight / 2) + 'px';
win.style.marginLeft = (-win.offsetWidth / 2) + 'px';

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

1
  • очень легко избежать, просто объявите функцию отдельно и вызывайте ее как img.onload=my_onload_function; кроме того, чтобы проверить загружена картинка или нет, есть свойство complete (чтобы работало и в ie оно должно быть задано после присвоения src)
    – zb'
    2 апр 2013 в 10:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.