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
– Marcos Silva, Commented Jan 12, 2017 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
– andrewb, Commented Jan 12, 2017 at 19:26

Community · Accepted Answer · 2017-05-23 10:31:06Z

5

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Apr 17, 2017 at 10:58

jafojial

1312 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mertcan Diken · Accepted Answer · 2017-05-29 09:09:39Z

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, 2017 at 9:09

Mertcan Diken

15.4k2 gold badges29 silver badges35 bronze badges

Comments

sariDon · Accepted Answer · 2024-07-06 07:06:19Z

0

Most of the answers provided will change 'all' the z-indices of the available/declared dialogs. If you want to be specific, you can:

Assign a class to the dialog when declaring it:

$('#divPopup).dialog({
        modal: true,
        draggable: true,
        classes: {'ui-dialog': 'dlg_wrap'}, // Assign a class 'dlg_wrap' to the dialog
    });

Declare the z-index of the assigned class with CSS:

.dlg_wrap{z-index: 99999 !important;}

PS: Declaring inline CSS z-index to the div wont work. The dialog title will be excluded.

answered Jul 6, 2024 at 7:06

sariDon

7,9992 gold badges22 silver badges33 bronze badges

Collectives™ on Stack Overflow

Changing jquery ui dialog z-index

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related