获取Jquery UI日历显示在模态弹出窗口 [英] Get Jquery UI Calendar to Show on Top of Modal Popup

问题描述

您有一个JQuery模态弹出窗口，我加载HTML到。我在我的scrpt文件中有以下代码：

  //日期代码 - 移动到可重用。 
 $（'。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 
}）; 
  

问题是，当我单击日历的图像时，它会弹出我的模态窗体。 / p>

任何帮助感谢

解决方案

将一些CSS添加到CSS文件在jQuery UI CSS之后加载，它将ui-datepicker类设置为高于模态对话框的z-index。我不记得什么是从我的头顶部，所以一点点实验可能是为了。你还可以在对话框打开事件回调到ui-datepicker-div DIV的过程中添加和删除z-index，如果你需要日期选择器只在对话框的上方，否则它是正常的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）; 
} 
}）; 
  

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

解决方案

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);
     }
});

这篇关于获取Jquery UI日历显示在模态弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！