JQuery Timepicker behind ModalPopupExtender

Question

I want to fix the z-index of the JQuery Timepicker behind 2 layer of modalPopupExtender. So far I try to fix it by changing the z-index of .ui-timepicker-div to 100002 like in here:

.ui-timepicker-div
{
    z-index:100002;
}

but still no luck. Any suggestions of what possible approach to fix this? It can be either in jQuery localization or pure css coding.

Thank you.

Answer 1

Eurika! I finally manage to fixed this with combined tweaks from the following scenario:

1. The 2-Layer modalPopupExtender are posting back. That means that the jQuery localize earlier are gone. To fix this issue, instead of $(document).ready(function() {});, you have to use function pageLoad(){} like this:

   function pageLoad()
   {
      $('#ctl00_ContentPlaceHolder1_txtTimeSlotFrom').timepicker({
           hourGrid: 4,
           minuteGrid: 10
      });
   }
   

2. Now, to fix the z-index, I include beforeShow config in localization like in here:

           $('#ctl00_ContentPlaceHolder1_txtTimeSlotFrom').timepicker({
               hourGrid: 4,
               minuteGrid: 10,
               beforeShow: function() {
                   setTimeout(function(){
                       $('.ui-timepicker').css('z-index', 16777271);
                   }, 0);
               }
           });
   

Answer 2

try this

.ui-timepicker  //on .ui-datepicker because it gives z-index to this div at runtime and add position:absolute;
{
    z-index:100002 !important;
    position:absolute;
}