Search code examples
jqueryjquery-uidatepickerfancybox

jQuery datepicker shows up behind popup

I am using two different jQuery plugins that I'm trying to combine. First I'm using a popup plugin from http://fancybox.net/home. When the popup shows I need to have a textfield with a datepicker inside the popup. The datepicker is from jQuery UI. The problem is that the datepicker always shows up behind the popup so it is impossible to select a date. Is this something I can change in some way?

My code:

<html>
    <a id="inline" href="#data">Open popup</a>

    <div style="display:none"><div id="data">
        <input id="datepicker" type="text">
    </div></div>
</html>

<script type="text/javascript">
    $(document).ready(function() {
        $("a#inline").fancybox();
        $("#datepicker").datepicker();
    });
</script>
Solution

  • You need to set the z-index of the datepicker higher than that of the fancybox. The fancybox z-index is 1101, just set the datepicker to 1102 or anything higher and it should bring the datepicker to the front.