Get Jquery UI Calendar to Show on Top of Modal Popup.

Question

Hi have a JQuery modal popup that I load HTML into. I have the following code in my scrpt file:

  //date code - move to reusable.
    $('.dateDavy').datepicker({
        showOn: 'button',
        buttonImage: '/Content/images/Control_MonthCalendar.bmp',
        buttonText: 'Enter Date',
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy',
        yearRange: '-115:+3',
        changeMonth: true,
        changeYear: true            
    });

The problem is that when I click the image for the calendar it pops up behind my modal form.

Any help appreciated

Answer 1

Add some CSS to a CSS file that is loaded after the jQuery UI CSS that sets the ui-datepicker class to have a z-index higher than the modal dialog. I don't recall what that is off the top of my head so a little experimenting might be in order. You could also add and remove the z-index during a callback for the dialog open event to the ui-datepicker-div DIV if you needed the datepicker to only be above the dialog when it is shown and otherwise have it's normal z-index.

.ui-datepicker
{
   z-index: 32767;
}

$('selector').dialog({
     open: function(event,ui) {
          $('#ui-datepicker-div').css('z-index',32767);
     },
     close: function(event,ui) {
          $('#ui-datepicker-div').css('z-index',null);
     }
});

Answer 2

You are great!!!!