Как выбрать элемент, если для отображения задан другой элемент: flex; с JS

Question

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

Так что-то вроде строки из «Если popup = display: flex; затем body = overflow: hidden;»

Как я могу сделать это с небольшим JS или Jquery? Или, если есть лучший метод, я открыт для предложений.

Вот код, который я использую для открытия всплывающего окна:

JS:

<script type="text/javascript">
    <!--
        function toggle_visibility(id) {
            event.preventDefault();
           var e = document.getElementById(id);
           if(e.style.display == 'flex')
              e.style.display = 'none';
           else
              e.style.display = 'flex';
        }

    //-->
    </script>

HTML:

<a href="#" onclick="toggle_visibility('id-of-popup');">Clickable item to open the Popup</a>

Answer 1

Я бы поменял твой код на использование классов. Добавьте таблицу стилей со следующим текстом:

.popup { display: none; }
.popup.show { display: flex; }
.popup-shown { overflow: hidden; }

Затем измените свой JavaScript, чтобы воспользоваться этим:

function toggle_visibility(id) {
    event.preventDefault();
    var e = document.getElementById(id);
    e.classList.toggle('show');
    document.body.classList.toggle('popup-shown');
}

Я предполагаю, что ваше всплывающее окно получает класс "popup" здесь.

Здесь используется интерфейс classList, который доступен в современных браузерах, в частности, не включает Inte rnet Explorer. На странице MDN есть полифилл для интерфейса для браузеров, которые его не поддерживают.

Answer 2

Итак, сначала вам нужно получить всплывающий элемент с querySelecor. Допустим, у всплывающего окна есть идентификатор, который вы сделаете:

var element = document.getElementById(popup_id_here);

Тогда. Вы можете получить вычисленный стиль элемента. Используя это:

var style = getComputedStyle(element);

Теперь вы можете проверить, является ли дисплей гибким:

if(style.display == "flex") ......

Применить стиль к телу

document.body.style.overflow = "hidden";