jQuery UI 1 10 dialog and zIndex option

Question

I have to make an dialog to apear when an image onclick  The problem is that I have some realy big z-index there  500 for example  and the ui dialog is on the back of that elements    Here is the page  you need to log in  user   raducup  and pass  1   Another problem is that when I click close ont the dialog  the object desapears   This is the function I call when a image is click   function openItem obiect          obiect   css  zIndex  9999          obiect   dialog           dialogClass   no-close           modal  true          draggable  true          overlay   background-color  red  opacity  0 5           buttons                                  text   OK                   click  function                            this   dialog   close                                                           reparaZindex

User · Answer

Add zIndex property to  dialog object      elm  dialog   zIndex  10000

User · Answer

Add in your CSS     ui-dialog   z-index  1000  important

User · Answer

Add this before calling dialog     obiect   css  zIndex  9999     And remove   zIndex  700    from dialog

User · Answer

To sandwich an my element between the modal screen and a dialog  I need to lift my element above the modal-screen  and then lift the dialog above my element   I had a small success by doing the following after creating the dialog on element  dlg    dlg closest   ui-dialog   css  zIndex  adjustment     Since each dialog has a different starting z-index  they incrementally get larger  I make adjustment a string with a boost value  like this   const adjustment      99     However  jQuery just keeps increasing the zIndex value on the modal screen  so by the second dialog  the sandwich no longer worked   I gave up on ui-dialog  modal   made it  false   and just created my own modal   It imitates jQueryUI exactly   Here it is   CoverAll       CoverAll modalDiv   null   CoverAll modalCloak   function zIndex      var div   CoverAll modalDiv    if  CoverAll modalDiv        div   CoverAll modalDiv   document createElement  div        div style background     aaaaaa       div style opacity       0 3       div style position      fixed       div style top           0       div style left          0       div style width         100        div style height        100          if  div parentElement        document body appendChild div         if zIndex    null      zIndex   100    div style zIndex    zIndex    return div     CoverAll modalUncloak   function       var div   CoverAll modalDiv    if div  amp  amp  div parentElement        document body removeChild div         return div

User · Answer

There are multiple suggestions here  but as far as I can see the jQuery UI guys have broken the dialogue control at present    I say this because I include a dialogue on my page  and its semi transparent and the modal blanking div is behind some other elements  That can t be right   In the end based on some other posts I developed this global solution  as an extension to the dialogue widget  It works for me but I m not sure what it would do if I opened a dialogue from within a dialogue   Basically it looks for the zIndex of everything else on the page and moves the  ui-widget-overlay to be one higher  and the dialogue itself to be one higher than that     widget  ui dialog     ui dialog        open  function                  var  dialog     this element 0             var maxZ   0                 each function                          var thisZ     this  css  zIndex                thisZ    thisZ      auto     Number maxZ    1    thisZ               if  thisZ  gt  maxZ  maxZ   thisZ                           ui-widget-overlay   css  zIndex    maxZ   1             dialog parent   css  zIndex    maxZ   2             return this  super                Thanks to the following  as this is where I got the info from of how to do this  https   stackoverflow com a 20942857  http   learn jquery com jquery-ui widget-factory extending-widgets

User · Answer

You may want to try jQuery dialog method         selector    dialog   moveToTop       reference  http   api jqueryui com dialog  method-moveToTop

User · Answer

You don t tell it  but you are using jQuery UI 1 10   In jQuery UI 1 10 the zIndex option is removed      Removed zIndex option      Similar to the stack option  the zIndex option is unnecessary with a   proper stacking implementation  The z-index is defined in CSS and   stacking is now controlled by ensuring the focused dialog is the last    stacking  element in its parent    you have to use pure css to set the dialog  on the top     ui-dialog   z-index  1000  important      you need the key  important to override the default styling of the element  this affects all your dialogs if you need to set it only for a dialog use the dialogClass option and style it   If you need a modal dialog set the modal  true option see the docs      If set to true  the dialog will have modal behavior  other items on   the page will be disabled  i e   cannot be interacted with  Modal   dialogs create an overlay below the dialog but above other page   elements    You need to set the modal overlay with an higher z-index to do so use    ui-front   z-index  1000  important      for this element too

User · Answer

moveToTop is the proper way   z-Index is not correct  It works initially  but multiple dialogs will continue to float underneath the one you altered with z-index  No good

[javascript] jQuery UI 1.10: dialog and zIndex option

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to jquery-ui