Magento 2 modal z-index

user_4517209 0
Viewed 1866

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! :)

magento2 magento z-index javascript
2 Answers

Fixed using css!

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

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

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);
user_83585000
Related