my97日期控件弹出位置显示异常

使用my97日期选择控件的时候,若是整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不一样会显示不一样的状况javascript

一、position不为fixed则滑动滚动条,显示的日期层不会出现异常位移,以下图css

    滚动条不动,正常显示html

    滚动条没去,正常显示java

二、position为fixed则滑动滚动税票,显示的日期层会根据滚动条的移动而移动,以下图ide

    滚动条不动,正常显示spa

    滚动条滑动,异常位移code

对于第二种状况解决方法以下:orm

写一个方法 以下:htm

function showDate() {
        $('iframe[hidefocus]').parent().hide();//用于强制从新计算坐标值
        new WdatePicker();
        var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
        var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
        var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
        var iCount = 0;
        //下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
        var intHandle = setInterval(function () {
            var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
            iCount++;
            if (iCount < 10) {
                $('iframe[hidefocus]').parent().css({
                    'position': 'fixed',
                    'top': newTop
                });
            }
            else {
                clearInterval(intHandle);
            }
        }, 100);
    }

触发的控件的onclick事件直接调用 此方法,完成页面html和调用代码以下blog

<h2>Index</h2>

<div style="height: 1000px; background-color: yellow">
</div>
<div style="position: absolute; top: 50%; left:50%; background-color: blue;">
    <input type="text" class="form-control" onclick="showDate();"/>
</div>
<script src="~/Scripts/plugin/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    function showDate() {
        $('iframe[hidefocus]').parent().hide();//用于强制从新计算坐标值
        new WdatePicker();
        var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
        var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
        var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
        var iCount = 0;
        //下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
        var intHandle = setInterval(function () {
            var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
            iCount++;
            if (iCount < 10) {
                $('iframe[hidefocus]').parent().css({
                    'position': 'fixed',
                    'top': newTop
                });
            }
            else {
                clearInterval(intHandle);
            }
        }, 100);
    }
</script>

最终显示结果以下,日期显示框没有位移

相关文章
相关标签/搜索