使用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. MongoDB一些应用知识点

    1.在生产环境中至少需要三个节点的复制集架构. 2.在多数的场景中WT引擎比MMAPv1更加出色. 3.要想达到极致的速度,那么一定要给MongoDB足够的内存. 4.避免使用短链接,充分利用连接池, ...

  2. webpack, autoprefixer

    可以通过postcss-loader 添加 const autoprefixer = require('autoprefixer'); ... { loader: 'postcss-loader', ...

  3. 对one hot 编码的理解,sklearn. preprocessing.OneHotEncoder()如何进行fit()的?

    查阅了很多资料,逐渐知道了one hot 的编码,但是始终没理解sklearn. preprocessing.OneHotEncoder()如何进行fit()的?自己琢磨了一下,后来终于明白是怎么回事 ...

  4. Codeforce 515A - Drazil and Date

    Someday, Drazil wanted to go on date with Varda. Drazil and Varda live on Cartesian plane. Drazil's ...

  5. OrCAD Capture CIS绘制原理图、Allegro PCB Design XL 绘制PCB

    1.OrCAD Capture CIS绘制原理图 1.1.快捷键 (1)放置连线         w (2)放置net名称      n     放下一个时再按n可以编辑名字 (3)编辑属性      ...

  6. Django 初试水(三)

    在前面的一和二中,分别实现了一些基础的操作,数据库和 Django 自带的管理界面,接下来,主要是创建我们自己的界面(视图). 访问一个地址,对应的服务器直接返回一个视图.这是最常见的交互. 就好比访 ...

  7. Wannafly Camp 2020 Day 2A 托米的字符串

    #include <bits/stdc++.h> using namespace std; const int N = 1000005; int n; char str[N]; int a ...

  8. C++——指针4

    8.对象指针  声明: 类名 *对象指针名 Point A(5,10): Point *ptr; ptr=&A;//通过指针访问对象成员:对象指针名->成员名.ptr->getX( ...

  9. linux - 删除软件包

    # 参数e的作用是使rpm进入卸载模式,对名为[package name]的软件包进行卸载 rpm -e [package name] # 由于系统中各个软件包之间相互有依赖关系,使用-nodeps忽 ...

  10. Linux系统搭建Java环境【JDK、Tomcat、MySQL】一篇就够

      前言:所有项目在完成开发后都会部署上线的,一般都是用Linux系统作为服务器的,很少使用Windows Server(大多数项目的开发都是在Windows桌面系统完成的),一般有专门负责上线的人员 ...