JavaScript для верстальщика. Урок 12. Улучшение модального окна-2

В этом уроке познакомимся с новыми методами, познакомимся с циклом и научимся центрировать элементы через js-код.

В данном случае для размещения модального окна по центру мы используем абсолютное позиционирование, свойство left: 50%, и отрицательный margin-left = -150px; равный половине ширины модального окна, которая составляет 300 px.
Предположим, что модального окна или любого другого элемента нам неизвестна, или она непостоянная, или у нас есть несколько однотипных элементов разной ширины.

Получаем ширину модального окна с классом js-modal:

$(".js-modal").width();

$(".js-modal").innerWidth();

Первый метод  width() получает ширину элемента без паддингов и бордеров, второй - innerWidth() - вместе с ними. Он нам и нужен.

Присвоим этот код переменной modalWidth и разделим результат на два, так как нам нужна половина ширины модального окна.

var modalWidth = $(this).innerWidth() / 2;

Дальше, как по мне, нужно было бы его умножить на минус единицу, нам ведь нужен отрицательный маргин, но автор предлагает использовать вот такую конструкцию:

css({
            "marginLeft": "-" + modalWidth + "px"
        });

Из-за того, что минус добавляется строкой, он превращает всё значение в строку и нам нужно дописывать единицы измерения.

И ещё одна особенность - точка с запятой после свойства не ставится.

Теперь данное модальное окно получит отрицательный маргин равный половине его ширины. Но другое окно с тем же классом получит точно такой же маргин, даже если его ширина будет другой. Для того, чтобы код касался каждого модального окна, создаём цикл, который пройдётся по всем модальным окнам:

$(".js-modal").each(function() {

    });

Код полностью:

$(".js-modal").each(function() {
        var modalWidth = $(this).innerWidth() / 2;

        $(this).css({
            "marginLeft": "-" + modalWidth + "px"
        });
    });