How to setup the z-index of multiple elements and updating them dynamically using javascript inside modal?

Question

I've written a code when user click on any div modal open and inside the modal all the div grouped together and work as a slider. But I want to give the highest z-index on the div which is clicked by the user and then carry the next and previous button functionality according to the highest z-index div.

Currently, when we are clicking on div the modal appears and set the highest z-index on the last slide and then the next and previous button work accordingly.

Below is the code:-

 $(function() { $('.gallery-wrapper').each(function() { var $this = $(this), galleryPopup = $this.find('.gallery-popup'), prevBtn = $this.find('.prev-btn'), nextBtn = $this.find('.next-btn'), posts = $this.find('.post'), current = 0 // -------- Opening popup by clicking on any item-link // -------------------------------------------- $this.find('.item-link').on('click', function(event) { event.preventDefault(); galleryPopup.fadeIn(); $('body, html').css('overflow', 'hidden'); }); // -------- Closing popup by clicking on close-link // -------------------------------------------- $this.find('.close-link').on('click', function(event) { event.preventDefault(); galleryPopup.fadeOut(); $('body, html').css('overflow', 'initial'); }); // -------- Popup slider script // -------------------------------------------- var galleryWrapper = document.querySelector('.gallery-wrapper'); var controls = galleryWrapper.querySelector('.button-holder'); var els = galleryWrapper.querySelectorAll('.post'); var order = Object.keys(els); var cn; var highestElm; function setZIndex() { for (var i in order) els[order[i]].style.zIndex = i; } function findHighestZIndex(elem) { var highest = 0; var highestElement = null; var elems = document.getElementsByClassName(elem); for (var i = 0; i < elems.length; i++) { var style = document.defaultView.getComputedStyle(elems[i], null); var zindex = style.getPropertyValue("z-index"); if ((zindex != 'auto') && (+zindex > highest)) { highest = zindex; highestElement = elems[i]; } } return highestElement; } // assign a click handler to the parent controls.onclick = function(e) { var elem = findHighestZIndex('post'); var nodes = Array.prototype.slice.call(document.querySelector('.collection').children); highestElm = Number(nodes.indexOf(elem)); if (!(cn = (e.target.className.match(/prev-btn|next-btn/) || [false])[0])) return; if (cn === "prev-btn") { if (highestElm == 0) { var lastChildElem = galleryWrapper.querySelector('.collection').lastElementChild; lastChildElem.classList.add('animate-out'); setTimeout(function() { lastChildElem.classList.remove('animate-out'); }, 300); } else { els[highestElm - 1].classList.add('animate-out'); setTimeout(function() { els[highestElm - 1].classList.remove('animate-out'); }, 300); } order.unshift(order.pop()); setTimeout(function() { setZIndex(); }, 400); } if (cn === "next-btn") { els[highestElm].classList.add('animate'); setTimeout(function() { els[highestElm].classList.remove('animate'); setZIndex(); }, 300); order.push(order.shift()); setZIndex(); } } setZIndex(); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden !important; } .gallery-popup { display: none; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; } .collection { max-width: 300px; margin: 0 auto; perspective: 1500px; position: absolute; left: 50%; top: 120px; transform: translateX(-50%); width: 100%; } .post { position: absolute; left: 0; top: 0; width: 300px; height: 400px; background: orangered; border: 5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 4rem; transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005); } .post img { width: 100%; height: 100%; object-fit: cover; } .animate { transform: translate3d(350px, 25px, -400px); z-index: 999 !important; } .animate-out { transform: translate3d(380px, 85px, -590px); z-index: -1 !important; /* keygrame if needed */ } .button-holder { position: absolute; bottom: 50px; width: 100%; text-align: center; } .button-holder button { margin: 5px; width: 70px; height: 30px; border-radius: 0; border: none; background: orangered; color: #fff; } .close-link { color: #fff; position: absolute; right: 15px; top: 15px; width: 35px; height: 35px; border-radius: 50%; line-height: 34px; text-align: center; text-decoration: none; font-size: 18px; font-family: 'Arial'; background: orangered; } .gallery-row { display: flex; flex-wrap: wrap; padding: 15px; margin-left: -10px; margin-right: -10px; } .gallery-row .item { padding: 10px; flex: 0 0 25%; max-width: 25%; height: 250px; background: orangered; border: 2px solid #fff; position: relative; } .gallery-row .item a { display: flex; position: absolute; height: 100%; top: 0; width: 100%; left: 0; font-size: 24px; color: #fff; text-decoration: none; align-items: center; justify-content: center; } .gallery-row .item img { width: 100%; height: 100%; object-fit: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery-wrapper"> <div class="gallery-row"> <div class="item"> <a href="#" class="item-link"> <span>1</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>2</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>3</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>4</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>5</span> </a> </div> </div> <!-- Gallery Popup --> <div class="gallery-popup"> <a href="javascript:void(0)" class="close-link">x</a> <div class="collection"> <div class="post"> <span>1</span> </div> <div class="post"> <span>2</span> </div> <div class="post"> <span>3</span> </div> <div class="post"> <span>4</span> </div> <div class="post"> <span>5</span> </div> </div> <div class="button-holder"> <div> <button class="prev-btn">Previous</button> </div> <div> <button class="next-btn">Next</button> </div> </div> </div> <!-- End of Gallery Popup --> </div>

Answer 1

Try like this:

 $(function() { $('.gallery-wrapper').each(function() { var $this = $(this), galleryPopup = $this.find('.gallery-popup'), prevBtn = $this.find('.prev-btn'), nextBtn = $this.find('.next-btn'), posts = $this.find('.post'), current = 0 // -------- Opening popup by clicking on any item-link // -------------------------------------------- $this.find('.item-link').on('click', function(event) { event.preventDefault(); setOrderClicked($(event.target)); galleryPopup.fadeIn(); $('body, html').css('overflow', 'hidden'); }); // -------- Closing popup by clicking on close-link // -------------------------------------------- $this.find('.close-link').on('click', function(event) { event.preventDefault(); galleryPopup.fadeOut(); $('body, html').css('overflow', 'initial'); }); // -------- Popup slider script // -------------------------------------------- var galleryWrapper = document.querySelector('.gallery-wrapper'); var controls = galleryWrapper.querySelector('.button-holder'); var els = galleryWrapper.querySelectorAll('.post'); var order = Object.keys(els); var cn; var highestElm; function setOrderClicked(el) { var index = $('.item-link').index(el); order = []; for(var i = 0; i < els.length; i++) { index = (index === els.length - 1 ? 0 : index + 1); order.push(index.toString()); }; setZIndex(); }; function setZIndex(){ for (var i in order) els[order[i]].style.zIndex = i; } function findHighestZIndex(elem) { var highest = 0; var highestElement = null; var elems = document.getElementsByClassName(elem); for (var i = 0; i < elems.length; i++) { var style = document.defaultView.getComputedStyle(elems[i], null); var zindex = style.getPropertyValue("z-index"); if ((zindex != 'auto') && (+zindex > highest)) { highest = zindex; highestElement = elems[i]; } } return highestElement; } // assign a click handler to the parent controls.onclick = function(e) { var elem = findHighestZIndex('post'); var nodes = Array.prototype.slice.call(document.querySelector('.collection').children); highestElm = Number(nodes.indexOf(elem)); if (!(cn = (e.target.className.match(/prev-btn|next-btn/) || [false])[0])) return; if (cn === "prev-btn") { if (highestElm == 0) { var lastChildElem = galleryWrapper.querySelector('.collection').lastElementChild; lastChildElem.classList.add('animate-out'); setTimeout(function() { lastChildElem.classList.remove('animate-out'); }, 300); } else { els[highestElm - 1].classList.add('animate-out'); setTimeout(function() { els[highestElm - 1].classList.remove('animate-out'); }, 300); } order.unshift(order.pop()); setTimeout(function() { setZIndex(); }, 400); } if (cn === "next-btn") { els[highestElm].classList.add('animate'); setTimeout(function() { els[highestElm].classList.remove('animate'); setZIndex(); }, 300); order.push(order.shift()); setZIndex(); } } setZIndex(); }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden !important; } .gallery-popup { display: none; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; } .collection { max-width: 300px; margin: 0 auto; perspective: 1500px; position: absolute; left: 50%; top: 120px; transform: translateX(-50%); width: 100%; } .post { position: absolute; left: 0; top: 0; width: 300px; height: 400px; background: orangered; border: 5px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 4rem; transform-style: preserve-3d; transition: transform 0.25s cubic-bezier(0.57, 0.09, 0.105, 1.005); } .post img { width: 100%; height: 100%; object-fit: cover; } .animate { transform: translate3d(350px, 25px, -400px); z-index: 999 !important; } .animate-out { transform: translate3d(380px, 85px, -590px); z-index: -1 !important; /* keygrame if needed */ } .button-holder { position: absolute; bottom: 50px; width: 100%; text-align: center; } .button-holder button { margin: 5px; width: 70px; height: 30px; border-radius: 0; border: none; background: orangered; color: #fff; } .close-link { color: #fff; position: absolute; right: 15px; top: 15px; width: 35px; height: 35px; border-radius: 50%; line-height: 34px; text-align: center; text-decoration: none; font-size: 18px; font-family: 'Arial'; background: orangered; } .gallery-row { display: flex; flex-wrap: wrap; padding: 15px; margin-left: -10px; margin-right: -10px; } .gallery-row .item { padding: 10px; flex: 0 0 25%; max-width: 25%; height: 250px; background: orangered; border: 2px solid #fff; position: relative; } .gallery-row .item a { display: flex; position: absolute; height: 100%; top: 0; width: 100%; left: 0; font-size: 24px; color: #fff; text-decoration: none; align-items: center; justify-content: center; } .gallery-row .item img { width: 100%; height: 100%; object-fit: cover; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery-wrapper"> <div class="gallery-row"> <div class="item"> <a href="#" class="item-link"> <span>1</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>2</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>3</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>4</span> </a> </div> <div class="item"> <a href="#" class="item-link"> <span>5</span> </a> </div> </div> <!-- Gallery Popup --> <div class="gallery-popup"> <a href="javascript:void(0)" class="close-link">x</a> <div class="collection"> <div class="post"> <span>1</span> </div> <div class="post"> <span>2</span> </div> <div class="post"> <span>3</span> </div> <div class="post"> <span>4</span> </div> <div class="post"> <span>5</span> </div> </div> <div class="button-holder"> <div> <button class="prev-btn">Previous</button> </div> <div> <button class="next-btn">Next</button> </div> </div> </div> <!-- End of Gallery Popup --> </div>

The key to opening the modal viewer to display a specific div is to understand what the order array looks like when each div is displayed:

index, order
0, ["0", "1", "2", "3", "4"]
1, ["1", "2", "3", "4", "0"]
2, ["2", "3", "4", "0", "1"]
3, ["3", "4", "0", "1", "2"]
4, ["4", "0", "1", "2", "3"]

For example, to display div 2 (index = 1), order must be ["1", "2", "3", "4", "0"] .

The setOrderClicked function has been added to set the order array according to the index of the clicked div. It is called from the .item-link click event. First, it uses the .index() function to find the index of the div which was clicked. Then it rebuilds the order array to match the above pattern. Finally, it calls setZIndex to apply the new z-index values.