Question

我有一个Fancy Box Popup。我在其中有很长的内容。该内容包括具有Datepicker的出生日期字段。

现在，当我点击字段时，Calender出现但当我用鼠标滚轮滚动时它不会保留在文本字段中，日期选择器不会移动，它保留在打开它的同一个地方，我希望它随着滚动移动

Here is the FIDDLE DEMO with this issue :

http://jsfiddle.net/PFVxK/1314/

只需单击Popup，然后单击Textfield，然后滚动它，

我该如何解决这个问题？

Answer 1

datapicker根据input原始位置定位日历。但是，滚动时它不会重新定位。不过，您可以在fancybox datepicker上重新定位scroll。

afterLoad: function () {
    $('.fancybox-inner').on('scroll', function () {
        var inp = $(this).find('input.hasDatepicker');
        $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
}, beforeClose: function () {
    $('.fancybox-inner').off('scroll');
}

afterLoad和beforeClose是加载花式框后和关闭框之前由花式框触发的回调方法。

查看演示http://jsfiddle.net/NsNHZ/1/并告诉我它是否适合您。

Answer 2

实际问题是，datepicker的 default position 为 fixed ，因此滚动时会有移动。

将datepicker与文本框一起修复并不好。我建议2个选项

最好删除弹出窗口中的滚动条（jsfiddle）。
制作内联日期选择器（jsfiddle）

Answer 3

请使用position: fixed;和margin-top:40px;

Answer 4

如果我在哪里，我会在滚动和调整大小时关闭DatePicker，可能没有人会介意，因为它也会关闭onblur()

看看这个小提琴：http://jsfiddle.net/PFVxK/1325/

$(".fancybox-effects-b").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    helpers: {
        title: {
            type: 'over'
        }
    },
    afterLoad: function () {
        $('.fancybox-inner').on('scroll', function () {
            CloseDatePicker();      
        });
    }, beforeClose: function () {
        $('.fancybox-inner').off('scroll');
    }
});

$(function() {
    $( "#dateofbirth" ).datepicker();

    /*Load only inside fancybox*/
    $(window).resize(function(){
        CloseDatePicker();
    });
});

function CloseDatePicker()
{
      if($("#dateofbirth").datepicker( "widget" ).is(":visible"))
      {
          $("#dateofbirth").datepicker("widget").hide();
          $("#dateofbirth").trigger( "blur");          
      }
}

Answer 5

请检查这个小提琴是否有效 - link。

 $('#dateofbirth').focus(function(){
     $( ".a" ).show();
     $( ".a" ).datepicker();
     });
     $('#dateofbirth').blur(function(){
     $( ".a" ).hide();
     });

更改了html： -

 <input type="text" name="dateofbirth" id="dateofbirth" placeholder="Date of Birth">
 <div class='a'></div> // new div added

Datepicker位置未在弹出窗口中修复文本字段

5 个答案: