Question

在一些问题解决后，我得到了一些棘手的东西。我正在使用一个名为prettyPhoto的JQuery叠加插件。

想要用表格做叠加。使用CSS隐藏表单，当单击链接时，叠加层会以漂亮的方式显示它。

到目前为止一切顺利，一切都按预期工作，只有一件事：这个表单有一个日期字段，我使用datepicker UI。

它（日期选择器）根本没有显示出来。起初，我尝试使用谷歌搜索并进行一些CSS调整...没有任何作用。关于CSS的z-index，z-index动态地...

然后我用Firebug来留意。 Datepicker通常在动态单击listener元素时设置其属性。在叠加层内的此窗体上，当我单击侦听器字段时，datepicker div根本不会更改。

关于如何运作的任何想法？

参考文献： 网站是：http://davedev.com.br/projects/jdc/v1/pt/reserva.php 是的，它是葡萄牙语。只需单击屏幕右下角的卡通对话框即可查看叠加层。

我正在使用google apis CDN for jquery和jquery-ui。

我正在开发和测试Ubuntu，Firefox 3.6.7（Chrome 5和Opera 10.60）。

是的，我正在使用一些HTML5元素和一些CSS3效果（卡通对话框是完全用CSS3制作的。没有图像。=]）。

Answer 1

使用此处提出的解决方案，我设法使日期选择器在灯箱中显示/消失（prettyphoto）但仍然在选择日期时出现javascript错误（f为空）。

几个小时后，这是我的完整解决方案：

$("#datepicker").live('focus', function(){ 
                 $(this).attr("id","datepickerNEWID");                 
                 $(this).datepicker();
});

因为lightbox创建了一个带有div内容副本的新DOM，所以我们有2个输入具有相同的ID，导致datepicker不起作用，所以我所做的就是更改datepicker id。

希望它有所帮助！

Answer 2

在查看您的代码之后，这就是我找到的内容。

似乎您在弹出窗体上正确绑定了datepicker。问题是，当你初始化prettyphoto时，绑定的日期选择器不再绑定。如果您可以查看萤火虫并密切关注<div id="pp_full_res"></div>，那就是您的表格。现在发生的事情是，当您打开/关闭弹出窗口时，表单会被删除或添加到DOM。这就是问题所在。

我能想到的一个解决方案是让你使用另一个叠加插件。

Answer 3

你的叠加插件'prettyPhoto'每次触发时都会创建一个新的DOM，因此，当你的灯箱中的DOM元素上不存在datepicker所包含的'focus'事件。

这是一个有同样问题的人：

jQuery live() failing with jQuery UI datepicker

你可能需要这样的东西：

$('#overlayData').live('click', function (){
  $(this).datepicker({dateFormat: 'dd/mm/yy'});
});

Answer 4

带灯箱的

不起作用。这是因为灯箱总是强调自己。

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

Jquery datepicker在lightbox中不起作用

4 个答案: