Andy Lanng Ответов: 1

Html разверните div на весь экран

Эй,

Это простой вопрос, но моя терминология не работает, поэтому я не могу найти то, что мне нужно в google:

У меня есть список отформатированных дивов, каждый с кнопкой "редактировать". Я хочу иметь возможность развернуть элемент, чтобы заполнить экран в виде наложения, вроде лайтбокса.

Моя проблема заключается в том, что если я просто установлю div в положение:fixed, то вы сможете увидеть, как другие дивы перемешиваются там, где они были раньше.

Я хочу иметь возможность расширить его, но оставить список незатронутым. Нужно ли мне добавлять заполнитель в список на его месте или что?

Любые советы, термины или ссылки google приветствуются

Спасибо
Энди

PS: Я скоро настрою jsfiddle или что-то в этом роде и добавлю его сюда

Что я уже пробовал:

Я попытался просто установить div в фиксированное положение, но остальная часть списка выскочила, чтобы заполнить пробел

РЕДАКТИРОВАТЬ

Угловой: Простой - JSFiddle[^]

Не самый лучший пример, так как нет анимации, но вы поняли идею

1 Ответов

Рейтинг:
10

Richard Deeming

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

$scope.enbiggen = function(e,item){
    var target = $(e.currentTarget).parent();
    if (target.is(".large")) {
        target.removeClass("large");
        target.prev(".dummy-item").remove();
    }
    else {
        var width = target.innerWidth();
        var height = target.innerHeight();
        $("<div />").addClass(target.prop("class")).addClass("dummy-item").innerWidth(width).innerHeight(height).insertBefore(target);
        target.addClass("large");
    }
}

Обновленная скрипка[^]
позиция-CSS | MDN[^]