jQuery-ui dialog automatically gets z-index

Question

I have an element named tools with z-index: 400000. I want it to be on the top of all elements always. In addition there is a jQuery-ui dialog on the same page with options:

$("#dialog").dialog({ stack: false, zIndex: 1000 });

first time that dialog opens i can see the tool element on top but since it closed and and open again, the dialog gets 400001 z-index automatically.

how to solve this ?

Solution

I think jquery dialog or modals are meant to float over all elements to serve its purpose. All the same you can try adding !important to the z-index css property of the tools element(s). Example

.tools{
    z-index:40000 !important;
}

If it does not solve the situation, then you can simply extend the jquery dialog plugin and overwrite the behavior of automatically setting the z-index to be the largest of all.

Comments

[Omid]

Don't need test, adding !important will not solve the problem at all. but have thought about extending the plugin myself, Nevertheless i'll wait for more solutions because editing plugin is unwarranted.

[Omid]

You're right, but tools has absolute position, it really works in your demo but not sure why it behave another way in my program

[charlietfl]

there must be some other code causing the z-index change. jQueryUI doesn't seem to do it as witnessed in fiddle demo. Even placing tool dead center where dialog is , tools is visible

[Omid]

Yes, What i see is that it's working correctly, i'm just wonder if the jQuery-ui library is not the same, i'm using 1.9.2 (last version)

[Omid]

The strange issue is that each time i open the dialog in my program z-index grows up (Using Firebug), but in your demo no such thing happens.

[charlietfl]

can you post link to live page? I don't think is jQueryUI doing it

[Omid]

Live page needs authentication, how can i send you a private message ?

[charlietfl]

could find an empty chat room and let me know which one it is

[Omid]

let us continue this discussion in chat

[Ken]

I had a case where the top of a dialog was hidden behind a css menu. the tools class did not work for me but setting z-index on .ui-front did.

[likeitlikeit]

in the current version of 1.9.3, adding !important actually fixed the issue.