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

  • 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 help
    Saturday, 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