z-index 9 is too low about jquery-loading HOT 5 CLOSED

Hi @tompazourek !

Since version 1.1 the z-index of the overlay element is set to the target's z-index + 1:
https://github.com/CarlosBonetti/jquery-loading/blob/v1.1.0/src/loading.js#L218

You're probably using version 1.0.3 or behind... can you double check that?

It could not fix your problem entirely, though. I think it wouldn't work if the target element is inside the modal (and not the modal itself)...

If you don't want to update, this dirty hack should fix the problem:

$('#target').Loading().overlay.css('z-index', 100000);

Maybe I could also allow the default z-index to be set via options for the plugin, what do you think?

Let me know if any of these work for you...

from jquery-loading.

Hi Carlos!

Thanks for quick response. You're right, I was using v1.0.3.

I managed to solve the problem using this code:

$.Loading.setDefaults({
  onStart: function (loading) {
    loading.overlay.css('z-index', 1e9);
  }
});

I'm not sure about the z-index being set via options, it doesn't add much benefit as opposed to setting it manually in handler. But it might be a little bit easier, since other people may experience the same issue and if it's a standard plugin option, they'll not have to dig in the source code.

I had an idea about a possible solution, which would be to look at all parents of the overlay element (I think jQuery's .parents() is the function), and set the z-index to be greater than the maximal z-index found among its parents. I haven't tried it, but it might be a way to go.

When I was reading the code, I was a bit confused about the self.settings.fullPage figuring in the z-index expression. Could you please explain how does it work with regards to the z-index? From the code it looked like it's a bool value.

from jquery-loading.

self.settings.fullPage is a bool value, but it is evaluated to 0 or 1 and added to the final zIndex. I do that because the $('body').loading(), which is a "full page" loading, will have a zIndex greater than the default zIndex by 1, so it will be on top of the default overlay elements. Of course this strategy fails on many scenarios, but these cases should be solved by the user.

The parents ideia could solve many problems but I'm a little concerned about performance... I'm doing some experiments anyway. I'm also adding the optional zIndex config to the plugin initialization, so other users could use:

$(...).loading({
    zIndex: 9999
});

A little better than hunting the source code for manual fixes... it should be done on next version.

from jquery-loading.

I'm closing this since now it's possible to config the zIndex value for the overlay element otherwise the plugin will calculate it based on the target z-index (b8c2b20)

from jquery-loading.

Would be great if this information was added in the options documentation.

from jquery-loading.