Magento Question posted in
The official documentation can be found here.

Magento 2 modal z-index

Is there a way to change the magento2 modal ( & modal overlay ) z-index, using their built in modal widget?

I’ve read all their docs and I couldn’t find a nice way of doing it. But I do really need to increase the z-index…

I would rather change z-index for specific modals, but a global override of all modal widget z-index’s would be OK too.

Here is the relevant part of my code (‘zIndex’ doesn’t do anything)

Any ideas..?

var options = {
  type: 'popup',
  clickableOverlay: true,
  zIndex: 9995 
};
var modalPopup = modal(options, $('#modal_id'));
$('#modal_el').click(function() { modalPopup.openModal() });

Cheers! 🙂

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Fixed using css!

    Set a custom class on the modal and set the z-index on this

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

  2. 0

    In my case editing a css class didnt resolve my issue and I find solution in adding a zIndex for modal form after init it.
    So you can after it

    var modalPopup = modal(options, $('#modal_id'));

    add this

    modalPopup.modal.zIndex(2000000001);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search