1

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.

0

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.