Get jquery ui calendar to display at the top of modal popup
Hi has a jQuery modal popup into which I am loading HTML. 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 on the image for the calendar, it appears behind my modal form.
Any help is appreciated
+2
source to share
1 answer
Add the CSS to the CSS file loaded after the jQuery CSS that sets the ui-datepicker class to a z-index higher than the modal dialog. I don't remember what it is from my head, so a little experimentation might be fine. You can also add and remove the z-index during the callback for the dialog open event in the dIV-datepicker-div if you need the datepicker to only be above the dialog when it is displayed, and otherwise has a 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);
}
});
+3
source to share