zIndex

We all know what z-index does, ya? Often time it can make like hard! Ever faced an issue when an element seems to disappearing just out of nowhere, and via browser console you find it hiding behind someone's back? yep z-index is the culprit here!

The layered modal system comes with a easy and simple solution. Since it supports stacking modals over each other, it gotta have a way to easily manage z-index, right? You are absolutely right!

We do this by setting a base z-index in modal manager instance and then it auto manages all modal's z-index based on their position in stack. So, that latest modal will have highest z-index so that it can always display at the top. Is any other element in you page vying for the spotlight? simply slap it with a higher base z-index and let the modal bask in glory!

Here is how you do it!

ModalManager.instance.setParameters({
    zIndex : 1023
});

ModalManager.instance.addModal({
    header : {
        enabled : true,
        title : 'Testing zIndex'
    },
    body : {
        content : `<div class="z-index-info">What is my zIndex?</div>`
    }
});

Below is a spotlight stealer button with zIndex value of 2000. Click it multiple time and you will see modals stacking and shifting by 100px top and left. You will also see how the base zIndex provided to ModalManager instance affects modals in stack.