Answered by:
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
Saturday, April 23, 2016 4:40 AM
Answers
-
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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, April 25, 2016 6:44 AM
All replies
-
User2031412921 posted
Hai claudia888,
Try this alert msg
ClientScript.RegisterStartupScript(this.GetType(), "myalert", "alert('Ur Popup content here');", true);
Saturday, April 23, 2016 7:40 AM -
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 helpSaturday, April 23, 2016 1:58 PM -
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.
Saturday, April 23, 2016 9:16 PM -
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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, April 25, 2016 6:44 AM -
User747696199 posted
Solved.
Thanks,
Claudia
Tuesday, April 26, 2016 2:57 AM