Multiple modal popup elements, can't set z-index

Question

I have two modals that can be opened on the page. But they both have the same z-index, so I try to set a higher z-index for one of them:

<script type="text/javascript">
    require(['jquery',
        'Magento_Ui/js/modal/modal','mage/validation'],function($){
        myModal.modal({
            responsive: true,
            zIndex: 950,
            ...

But the zIndex: 950, doesn't work at all. I wonder maybe it is some deprecated or undocumented option because the off. docs don't mention it. https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_modal.html

Update: I have found out that here

baseIndex = zIndex + this._getVisibleCount();

_getVisibleCount() returns 0 even though one modal is already open. That's my problem.

Answer 1

By default, there is no zIndex/z-index property available for modals. It will set higher z-index on the last created popup. So last created popup will be always on top with higher z-index.

But you can use modalClass property to set CSS class and set required z-index on that class.

var options = {
  ...
  modalClass: 'css_class_for_z_index'
  ...
};

OR if you want to set z-index dynamically, you can overwrite _setActive function in modal.js. Check this answer for more.