Форум

Владислав_Со · #1 (**permalink**) 23.03.2020, 20:09

Добрый вечер! Можно ли написать такую функцию, чтобы при срабатывании другой функции, все блоки div в секии присваивали себе z-index:1 ?? (так как каждый блок имеет свой z-index) /

При использовании этого

<div class="lightbox">
    <input type="checkbox" id="case-1" class="lightbox1"/>
    <label for="case-1"> View case study</label>
    <div><div>
        <label for="case-1"></label>
        <div>
            <div>ParkApp<label for="case-1">✖</label></div>
            <div><img src="./images/case_study1.1.jpg" alt=""></div>
        </div>
    </div></div>
</div>

а вот его js

var inp = document.getElementsByClassName("lightbox_view");
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow = this.checked ? "hidden" : "auto";
    document.documentElement.style.marginRight = this.checked ? "17px" : "";
    document.documentElement.style.zIndex = this.checked ? "999" : "auto";
  };
}

Чтобы избежать вот этого безобразия
*** Огромная картинка ***

voraa · #2 (**permalink**) 24.03.2020, 10:04

document.documentElement.style.overflow = this.checked ? "hidden" : "auto";

Это как то странно.
documentElement - это весь документ. Вернее элемент <html>. В нем содержится все остальное.

Но не понятно, каким именно блокам и в какой секции нужно присвоить z-index

voraa · #3 (**permalink**) 24.03.2020, 10:35

Не знаю, правильно ли я понимаю вашу задачу.
Но мне она представляется так
Есть некий контейнер , в котором содержатся блоки (12 шт), которые на экране перекрываются. И при клике на блок (или любой любой элемент внутри этого блока) этот блок должен оказаться в самом верху так, что бы его ничего не перекрывало.

<div id='cont'>
   <div class="lightbox">
      ......
   </div>

   <div class="lightbox">
      ......
   </div>
   ......
   <div class="lightbox">
      ......
   </div>
</div>

Правильно?

Если так, то не нужны никакие z-index.
Просто переставляем вверх блок, на который кликнули

const cont = document.getElementById('cont')
cont.querySelectorAll('.lightbox').forEach (dlb => dlb.addEventListener('click', () => cont.appendChild(dlb) ))

Можно и немного по-другому

const cont = document.getElementById('cont')
cont.addEventListener('click', (ev) => {
   const dbl = ev.target.closest('.lightbox')
   if (dbl) cont.appendChild(dlb)
})

Форум

Справочник

Discord чат

Курсы javascript