使用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 = ;
//下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
var intHandle = setInterval(function () {
var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
iCount++;
if (iCount < ) {
$('iframe[hidefocus]').parent().css({
'position': 'fixed',
'top': newTop
});
}
else {
clearInterval(intHandle);
}
}, );
}
</script>

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

my97日期控件弹出位置显示异常的更多相关文章

  1. 根据条件决定My97DatePicker日期控件弹出的日期格式

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  2. 关于JSON日期格式显示及My97日期控件

    1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...

  3. my97日期控件

    http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...

  4. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  5. js ui框架 My97日期控件 富文本编辑器

    My97日期控件 http://www.my97.net/dp/index.asp 富文本编辑器 http://www.kindsoft.net/demo.php 百度的magic也不错 http:/ ...

  6. mui popover 自定义 弹出位置 显示 隐藏

    mui popover 一.要显示.隐藏弹出菜单插件,mui推荐使用锚点方式. 1.页面顶部导航栏.底部工具栏固定位置 <header class="mui-bar mui-bar-n ...

  7. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

  8. My97日期控件 选择日期区间

    <script language="javascript" type="text/javascript" src="My97DatePicker ...

  9. my97 日期控件

    官网:http://www.my97.net/   好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/

随机推荐

  1. from selenium.webdriver.chrome.options import Options中add_argument 常用参数表收集

    chrome_options.add_argument("xxx") 序号 参数 说明 1 --allow-outdated-plugins 不停用过期的插件. 2 --allow ...

  2. 【巨杉数据库SequoiaDB】巨杉Tech | 巨杉数据库数据高性能数据导入迁移实践

    SequoiaDB 一款自研金融级分布式数据库产品,支持标准SQL和分布式事务功能.支持复杂索引查询,兼容 MySQL.PGSQL.SparkSQL等SQL访问方式.SequoiaDB 在分布式存储功 ...

  3. Learn from Niu

    创新的源头来自于思考,尤其是深度思考: 1. 读博过程必然会经历痛苦,思考,深度思考这么一个过程,其中思考是最重要的,尤其是深度思考. 思考之后才是创新. 2. 借用其他的知识弥补这个领域的知识,不简 ...

  4. Mysql备份参数

    --all-databases , -A 导出全部数据库. mysqldump -uroot -p --all-databases --all-tablespaces , -Y 导出全部表空间. my ...

  5. shell问题汇总

    1. sudo执行脚本找不到变量 当普通用户下,设置并export一个变量,然后利用sudo执行echo命令,能得到变量的值,但是如果把echo命令写入脚本,然后再sudo执行脚本,就找不到变量,未能 ...

  6. 《Head first设计模式》学习笔记 – 迭代器模式

    <Head first设计模式>学习笔记 – 迭代器模式 代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 爆炸性新闻:对象村餐厅和对象村煎饼屋合并了!真是个 ...

  7. excel用xlrd日期变成42631.0

    datetime的解决办法混合数据的表中有个日期:2016/9/18 通过table.row_values(row_number)[1]读取时,显示的结果为:42631.0 查看row_values方 ...

  8. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  9. EF中的上下文(DbContext)简介

    DbContext是实体类和数据库之间的桥梁,DbContext主要负责与数据交互,主要作用: 1.DbContext包含所有的实体映射到数据库表的实体集(DbSet < TEntity > ...

  10. visual env VS conda environment of python

    1. There's two types of python environment in pycharm: virtualenv Environment conda environment For ...