Z-index conflict with Magnific-Popup

[rafaelrenanpacheco]

Hi there!

After updating from 4 to 5, when sweetalert2 is fired inside a Magnific-Popup, it loses the z-index battle to it. Magnific-Popup has a wrapper under the body tag, called mfp-wrap, with a z-index of 1043 (magic number).

Sweetalert2 also has a wrapper under the body tag, called swal2-container, with a z-index of 1000. So it is fired bellow the magnific-popup, which is a problem.

This is easily solved by overwriting sweetalert2 z-index to a number above 1043, but would be possible, in order to enhance this plugin, to programmatically detected the needed z-index to ensure that sweetalert2 will fire up above everything? For example, detected which tag bellow body has the biggest z-index, then set the sweetalert2 z-index to that number + 1.

Best regards,
Rafael Pacheco.

[limonte]

Maybe we should just assign the max z-index value for .swal2-container? It's 2147483647.

[rafaelrenanpacheco]

As sweetalert2 represents a popup that must be the top most frame, I think it's okay to max it up. But this number must be compatible with all browsers. Maybe a little less aggressive number, like 10000? I don't recall seeing any modal plugin which uses big z-indexes.

[samturrell]

I'd probably say something around 1060. That would also put it above bootstrap modals. I wouldn't set it to the max because some plugins such as jquery datepicker attach to the body by default and would need to be above sweetalert for use in the modal.

[limonte]

nice point with a datepicker, I'll make it 1060.

[limonte]

Fixed in v5.0.5.

Thank you both @rafael-renan-pacheco for reporting and @samturrell for pointing out possible datepicker inside the swal2 modal.

[JamoCA]

I'm using MagnificPopUp 1.1.0 (latest) and sweetalert 7.0.5 (latest). The sweetalert modal is properly displayed and the buttons are clickable, but if I add a "password" field, I won't gain focus. I've increased the z-index, but it didn't seem to make any difference. Is this the same issue as bootstrap?

CASE USE: I'm using MagnificPopUp to display product details (via Ajax) on a web-based POS. Any buttons with a specific class trigger sweetalert to display prompt to require an administrative passcode to override before continuing. It works, until the buttons are clicked within a MagnificPopUp modal.

[irman]

@JamoCA I'm having the exact same input not focusable issue right now. Any solution yet?

[irman]

I think I've found my solution, just in case anyone wondering. Simplifying this: dimsemenov/Magnific-Popup#897

I just add that line on magnific open callback. E.g:

$('.listing').magnificPopup({
    ....
    callbacks: {
        open: function() {
            // Disabling focus enforcement by magnific
            $.magnificPopup.instance._onFocusIn = function(e) {};
         }
    }
});