How to make a jquery dialog window appear at the top?

Question

User747696199 posted

Hi,

I added a jquery dialog window to a page, how do I make sure it appear at the very top?

This page already has a larger pop-up <div>, with a high z-index (10004).

The jquery dialog window I added only shows up underneath the existing pop-up.

The code I use to bring up this jquery dialog window is

function createNewDialog() {
            return $('<div></div>');
        }

I tried to add a higher z-index to it, like this:

return $('<div style="z-index:20000;"></div>');

But, it does not work. Any suggestions?

Thanks,

Claudia

Answer 1

User2031412921 posted

Hai claudia888,

Try this alert msg

 ClientScript.RegisterStartupScript(this.GetType(), "myalert", "alert('Ur Popup content here');", true);

Answer 2

User632428103 posted

Hello all,

try this :

$( "YOUR DIV" ).dialog({ position: "top" });

or looks at this article : 

http://www.tutorialspoint.com/jqueryui/jqueryui_position.htm

Hope this help

Answer 3

User-474980206 posted
This one of the issues with jquery UI, you don't supply all the html. Jquery UI is wrapping your content with its own div and setting the z-index, so your div is just on top of any child div in the dialog. You will need to override the jquery UI CSS. Review the source CSS. Also the browser debugger can help. You also after the jquery UI dialog is created, make it a child of the div current in front.

Answer 4

User61956409 posted

Hi claudia888,

It seems that you’d like to specify the stack order of element via z-index property, you could override z-index property for your dialog.

z-index: 20000 !important;

Besides, you could use F12 developer tools to select element and check the actual value of z-index property.

Best Regards,

Fei Han

Answer 5

User747696199 posted

Solved.

Thanks,

Claudia