Блог

У меня есть неупорядоченный список, который действует как моя горизонтальная панель навигации в верхней части моей страницы, и два диалоговых окна Jquery UI в моем контенте для получения информации.

 <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>
  

Скажем, dialog1 перетаскивается в мою навигацию «topnav» и располагается поверх части навигации. Теперь я хотел бы щелкнуть в любом месте элемента ‘topnav’ и заставить его z-индекс вести себя так же, как поведение z-индекса диалогового окна, и перейти к началу стека. И если я нажму на любое из диалоговых окон, они будут вверху.

Возможно ли заставить элемент, не относящийся к jquery-ui, вести себя подобным образом? … если да, то как?

Я немного изучил это. Диалоговое окно сохраняет счетчик с максимальным z-индексом ( $.ui.dialog.maxZ ), который затем увеличивается каждый раз, когда вы нажимаете на что-либо, и применяется к диалоговому окну, чтобы оно отображалось поверх других. Вы можете просто использовать этот счетчик для своих собственных элементов.

Смотрите этот jsfiddle для примера:

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

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