打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

使用my97日期选择控件的时候,如果整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不同会显示不同的情况

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

    滚动条不动,正常显示

    滚动条没去,正常显示

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

    滚动条不动,正常显示

    滚动条滑动,异常位移

对于第二种情况解决方法如下:

写一个方法 如下:

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和调用代码如下

<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>

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
jQuery日期控件
将展示内容(div、iframe)放在Expand控件中
DIV的图片无缝滚动
JS网站广告实现侧边栏滚动至div顶部后固定、鼠标滚动下拉侧边栏DIV固定
侧栏广告 跟随浏览器移动(扩展)
用JQuery操作元素的style属性
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服