使用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. windows下安装配置subline+Markdown

    安装环境:win10 64bit 1. 安装subline3 subline : http://www.sublimetextcn.com/  直接下载安装,不用激活(dao版,慎用) 2. 安装Ma ...

  2. UI自动化测试的Page Object模式

    在UI级的自动化测试框架中,当页面样式改变或者页面元素属性改变,那么代码也要随之进行修改,如何做到高效快速的修改代码来适应这些改变呢,这个时候可以引入Page Object模式,也是页面对象设计模式. ...

  3. [SDOI2017] 新生舞会 - 二分图最大权匹配,分数规划,二分答案

    有一个二分图,每个部都有 \(n\) 个点,每条边有两个参数 \(a_e, b_e\),求一种匹配,使得 \(\sum a_i / \sum b_i\) 最大 Solution 显然的分数规划,考虑二 ...

  4. 常用phpstorm快捷键

    欢迎提交你经常使用的快捷键 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 ctrl+q 查看代码注释 ctrl+d 复制当前行 ctr ...

  5. java替换文件中某一行文本的内容

    个人博客 地址:http://www.wenhaofan.com/article/20180913160442 代码如下 package com.wenhaofan.common.kit; impor ...

  6. 获取mybaties插入记录自动增长的主键值

    首先在Mybatis Mapper文件中insert语句中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是保存主键值的属性. 例如: <in ...

  7. PyTorch对ResNet网络的实现解析

    PyTorch对ResNet网络的实现解析 1.首先导入需要使用的包 import torch.nn as nn import torch.utils.model_zoo as model_zoo # ...

  8. 165.扩展User模型-继承AbstractBaseUser

    继承自AbstractBaseUser模型 如果你想要修改默认的验证方式,并且对于User模型上的一些字段不想要,那么可以自定义一个模型,然后继承自AbstractBaseUser,再添加你想要的字段 ...

  9. 159.SQL注入的实现和防御措施

    sql注入: 所谓sql注入,就是通过把sql命令插入到表单中或页面请求的查询字符串中,最终达到欺骗服务器执行恶意的sql命令.具体来说,它是利用现有的应用程序,将(恶意的)sql命令注入到后台数据库 ...

  10. OSI协议

    物理层: 网线连接在客户端计算机上,其实是连接在了计算机的一个叫做网卡的设备上,网卡是专门负责与外界通信的.网线一般是双绞线或者光缆,也可以使用无线电波,中间经过交换机,路由器,防火墙等等一堆设备统称 ...