Jquery datepicker does not work inside lightbox

问题

After some problems solved, I got a tricky stuff. I am using an overlay plugin for JQuery called prettyPhoto.

Just wanna make an overlay with a form. The form is hidden with CSS, and when a link is clicked, the overlay shows it in a nice fashion.

So far so good, everything working as expected, except only one thing: this form has a date field, in which I use datepicker UI.

It (the datepicker) does no shows up at all. At first, I tryed googling and making some CSS adjustments... nothing works. z-index on CSS, z-index dynamically...

Then I used Firebug to keep an eye. Datepicker usually sets its properties just when the listener element is clicked, dynamically. On this form inside the overlay, when I click the listener field, the datepicker div does not change at all.

Any ideas on how get this working?

References: site is: http://davedev.com.br/projects/jdc/v1/pt/reserva.php Yes, it is in portuguese. Just click the cartoon dialog box on bottom right side of screen to see the overlay.

I am using google apis CDN for jquery and jquery-ui.

I am developing and testing upon Ubuntu, Firefox 3.6.7 (Chrome 5 and Opera 10.60).

And yes, I am using some HTML5 elements and some CSS3 effects (the cartoon dialog baloon is fully made with CSS3. No images. =]).

回答1:

Your overlay plugin 'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox.

Here is one person who had the same problem:

jQuery live() failing with jQuery UI datepicker

You'll probably need something like this:

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

回答2:

Using the solution proposed here I manage to make the datepicker appear/disapear in a lightbox (prettyphoto) BUT still with a javascript error (f is null) when selecting a date.

After couple of hours here's my complete solution :

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

Because lightbox creates a new DOM with a copy of the div content we then have 2 input with same ID that causes datepicker to not work so what I do is change the datepicker id.

Hope it helps!

回答3:

after looking into your codes, here's what I found.

It seems that you binded the datepicker correctly on the popup form. The problem is, when you initialize the prettyphoto, the binded datepicker is not anymore binded. If you can look at firebug and watch closely on <div id="pp_full_res"></div>, that's where your form goes. What happen now, is when you open/close the popup, the form gets remove or added to the DOM. That's the problem.

One solution I can think is for you to use another overlay plugin.

回答4:

with lightbox doest not work. This is because the lightbox always enforce focus on itself.

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

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

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

来源：https://stackoverflow.com/questions/3392961/jquery-datepicker-does-not-work-inside-lightbox