Question

I have an unordered list that acts as my horizontal navigation bar at the top of my page, and two Jquery UI dialogs in my content for info.

<ul class="topnav">
    <li>Home</li>
    <li>Logout</li>
</ul>
<div id="content">
    <div id="dialog1" title="dialog1">Dialog 1 info</div>
    <div id="dialog2" title="dialog2">Dialog 2 info</div>
</div>

Say dialog1 is dragged over to my ‘topnav’ navigation and sitting on top of a portion of the nav. Now I would like to click anywhere in the ‘topnav’ element and have it’s z-index behave like the dialog’s z-index behavior and change to the top of the stack. And if I click the any of the dialogs then they’ll be at the top.

Is it possible to make a non-jquery-ui element behave like this?…if so, how?

Answer 1

I looked into it a bit. Dialog keeps a counter with the max z-index ($.ui.dialog.maxZ), which it then increments each time you click on something and applies to the dialog to make it go on top of the others. You can simply use this counter on your own items.

See this jsfiddle for an example:

http://jsfiddle.net/dkahp/1/

$(".myStuff").click(function(){
   $(this).css("z-index",++$.ui.dialog.maxZ);
})