Changing jquery ui dialog z-index

Question

I am using bootstrap and jquery UI dialog.

At the top of my page there is a element which gets a z-index of 1000.

When I open one of my jquery UI dialogs, the z-index of the outer div is 101.

I have set the modal property to true but the top of the dialog appears behind some of the content from the header. Note that for the actual div in my markup,

<div id="divPopup" style="display: none; z-index:5000;"></div>

Appears fine because of the 5000. However, the top bar of the dialog appears behind content.

Is there a way to change the z-index of the wrapper div?

Could you provide a little more code? For example, you mention is `divPopup` your wrapper div or is it its parent? — Marcos Silva, Jan 12 '17 at 19:01
divPopup is the div I display in the dialog, but jquery UI appends a wrapper div which has a z-index of 101 — andrewb, Jan 12 '17 at 19:26

score 4 · Answer 1 · edited May 23 '17 at 10:31

4

You need to use pure css to set the dialog "on the top":

.ui-dialog { z-index: 1000 !important ;}

Full answer here

edited May 23 '17 at 10:31

Community

1
1

answered Apr 17 '17 at 10:58

jafojial

121
1
5

score 1 · Answer 2 · answered May 29 '17 at 09:09

1

You need to add a position to div for get z-index working.

<div id="divPopup" style="display: none;position:absolute, z-index:5000;"></div>

answered May 29 '17 at 09:09

Mertcan Diken

14,483
2
26
33

Changing jquery ui dialog z-index

2 Answers2